Installed material flex layout in my project but i unable to see the file in #node_modules and its not rendering properly for flex layout css.
Below code i followed, please suggest any thing missing here.
installed
npm install #angular/flex-layout#latest --save
imported app.components.ts
import { ObservableMedia } from '#angular/flex-layout';
imported in app.moduel.ts
import { FlexLayoutModule } from '#angular/flex-layout';
imports: [
BrowserModule,
BrowserAnimationsModule,
FlexLayoutModule
],
Node:
installed version
#angular/flex-layout#2.0.0-beta.9
for reference
Nothing seems to be missing. Pay attention to your Angular version - "Deprecated support for Angular 2.4.x" https://github.com/angular/flex-layout
You should be able to find the lib here: node_modules/#angular/flex-layout. Here is some basic directive usage example. Hope it helps!
<div fxLayout="row" fxLayoutAlign="space-around center">
<div fxFlex="33"></div>
<div fxFlex="33"></div>
<div fxFlex="33"></div>
</div>
Flex layout works great with angular, all you need is here.
Please visit this link and follow documentation:
https://github.com/angular/flex-layout
---------Extra Note---------------
If you are using visual code there is also a plugin for angular flex layout which can be used for more fast coding.
Related
I have an Angular project with PrimeNg Library and I want to use p-dropdown component I imported it at app.module file like this:
import { DropdownModule } from "primeng/dropdown";
imports: [
DropdownModule,
],
And when I use it on an html file:
<div class="charts-dropdown">
<p-dropdown [options]="chartsDropdownLookup" [(ngModel)]="selectedChartOption"></p-dropdown>
</div>
This is How it looks:
It doesn't render my [options] array which is an array with label and value attributes and it doesn't show the styling properly.
What I'm missing here?
I just had exactly the same issue.
Ensure the "styles" array includes the prime ng style sheets under the "build" AND "test" (under "architect" under the project under "projects"):
"styles": [
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/nova-light/theme.css",
"./node_modules/primeng/resources/primeng.min.css"
],
Other stylesheets will probably already be there. Other themes are available.
I only found the relevant documentation after working out the solution, but it is detailed here on the PrimeNG web site:
https://www.primefaces.org/primeng/showcase/#/setup in the Styles Configuration section at the bottom of the page.
I want to display a dictionary in a nice way. In standard HTML I would use DL tag. I didn't find an analog in ant.design yet.
When you use the ant-design, you have to install yarn add antd or npm install antd --save
After, the easiest way for ant-design is adding the index.html(ex.For React)
https://cdnjs.com/libraries/antd
You can use these link.
<link type="stylesheet" href="paste the antd css from url">
And then, you will be use this.
Lastly, I recommend to you "min.css" file.
If you use ant.design, it doesn't mean that you can not use standard HTML tags, you can still use them.
For example, this will look nice:
import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
ReactDOM.render(
<div>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</div>,
document.getElementById('container')
)
I am putting an angular portion into my MVC app. As such, I have added a tag to my layout view to find the Angular source code, and this is working great.
My issue arises in trying to add a 3rd party module to my project. I added it through the package.json with no problem, and added the module to my app.module.ts as follows:
import { FileUploadModule } from 'primeng/fileupload';
The reference is found, Visual Studio is happy, everything is fine. However, when I run the project locally, I get the following 404 error:
GET http://localhost:59911/src/primeng/fileupload 404 (Not Found)
It seems to me likely that the tag is causing the issue, but I can't remove it without killing the rest of the Angular functionality. Any hints? Can I add an override to the imports call?
Thanks, Mike
On PrimeNG's official website they suggested using import { FileUploadModule } from 'primeng/fileupload'; but it doesn't work any more. I guess they didn't update the docs.
You need { FileUploadModule } from 'primeng/primeng';
The structure is
In the primeng.d.ts file PrimeNG re-exported all modules.
export * from './components/fileupload/fileupload';
For now, no matter which PrimeNG module is used, it is all from primeng/primeng. Here's the imported modules in my project:
import {
ButtonModule,
CodeHighlighterModule,
ConfirmDialogModule,
FieldsetModule,
FileUploadModule,
GrowlModule,
MessagesModule
} from 'primeng/primeng';
The version I use is "primeng": "^4.2.1"
The issue was that primeng was not in the mapping, so it was looking for it in src.
I added the following to systemjs.config.js:
in maps:
'primeng': 'npm:primeng',
in packages:
primeng: {
defaultExtension: 'js'
}
Thanks for the help everyone!
I use this ionic version.
Cordova CLI: 6.2.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.2
Node Version: v7.4.0
Here's the code and its purpose is for the user to enter info and submit it.
<ion-content>
<ion-list *ngIf="isTest">
<ion-input> </ion-input>
<ion-input> </ion-input>
<ion-input> </ion-input>
</ion-list>
<button ion-button>Submit</button>
</ion-content>
On Android it's working, but when I test it on iOS, when I click on ion-input the page jumps up and down which is not good UX at all. Any ideas how to solve this issue on iOS ?
Here is video example of the issue. drive.google.com/open?id=0B22-s3eK4PTLWXpNMk1tbzdjcGs
Ok. After some research I found the answer for my issue. If someone else is having issue like this one, then in app.component.ts file you should add this lines.
constructor(private config: Config) {
this.config.set("scrollPadding", false);
this.config.set("scrollAssist", false);
this.config.set("autoFocusAssist", true);
this.config.set("android", "scrollAssist", true );
this.config.set("android", "autoFocusAssist", "delay");
}
this solved my problem for iOS and Android.
Try using ion-input like it's in the docs, inside a ion-item.
<ion-item>
<ion-label stacked>Name</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
if you don't want a ion-label just remove it and add item-content as a attribute to ion-input.
When you use ion-item Ionic automatically adds some classes and components where it places the input inside, maybe the lack of this component is causing your screen to bump when it's unecessary.
Hope this helps.
#djumerko is right. Just a little change.
Here is what works for me:
this.config.set("ios", "scrollPadding", false);
this.config.set("ios", "scrollAssist", false);
this.config.set("ios", "autoFocusAssist", true);
this.config.set("android", "scrollAssist", true );
this.config.set("android", "autoFocusAssist", "delay");
I have come across this strange problem and it is driving me nuts.
It looks like a bug, but I don't know if maybe I am doing someting wrong.
The CSS attached to a component via cssUrl doesn't work on Internet Explorer.
If I add some content to the html template and I use classes from the CSS, those classes are not applied in IE. However, the same code works fine in Dartium, Chrome and Firefox.
I have created a sample project in github showing the error:
https://github.com/gonzalopezzi/ie-angulardart-shadowdom-bug
The project has the following dependencies:
dependencies:
browser: 0.10.0+2
angular: 0.11.0
shadow_dom: 0.10.0
(I have tried to avoid "any" but those are the latest versions of such packages)
I have a very simple component:
import 'package:angular/angular.dart';
#Component(selector: 'internet-explorer-bug',
templateUrl:'internet-explorer-bug/internet-explorer-bug.html',
cssUrl:'internet-explorer-bug/internet-explorer-bug.css',
useShadowDom: true,
publishAs: 'cmp')
class InternetExplorerBug {
}
This is the css file (internet-explorer-bug.css):
.red-div {
background-color: red;
}
And this is the template (internet-explorer-bug.html)
<div id="main-div">
<div class="red-div">Red background?</div>
</div>
The component works properly in Dartium, Chrome and Firefox. It doesn't show the red background in Internet Explorer, though.
I have tested it in Internet Explorer 10 and 11. These are the results:
The red background is not displayed
The browser downloads the css file (I can see that in IE dev tools)
If I inspect the DOM, I see a strange css attribute assigned to the div with the name "background-color:red" and no value:
.red-div {
background-color:red: ;
}
I have posted the same question in the mailing list (here). If I somebody helps me there I will post the solution here too.
Any help will be appreciated.
Thanks in advance.
I guess this line causes the problem
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
This is deprecated. You should use
<script src="packages/web_components/platform.js"></script>
You need to change your pubspec.yaml too (shadow_dom to web_components)