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.
Related
I've deployed my angular 7 project in cumulocity server. No errors while building and deploying the application. But, Bootstrap CSS styling is not working properly.
In package.json I've mentioned these dependencies.
"#c8y/ngx-components": "1004.2.0",
"#c8y/style": "1004.2.0",
"#ng-bootstrap/ng-bootstrap": "^4.1.0",
In the new Angular Web SDK the Cumulocity Team switched to ngx-bootstrap. It is included in ngx-components, so no need to add it.
Your issue might be that some styles are missing as Cumulocity just comes with a subset of bootstrap. You might need to add bootstrap CSS to your app to make it working:
Add a branding entry in the package.json:
"c8y": {
"application": {
"name": "tutorial application",
"contextPath": "tutorial-application",
"key": "tutorial-application-key",
"brandingEntry": "./branding/branding.less",
"globalTitle": "Pied Piper IoT",
"tabsHorizontal": true
}
}
Then add the #c8y styles plus bootstrap in that file:
#import '~#c8y/style/extend.less';
#import '~yourpatt/to/boostrap.css';
I am trying to use mat-dialog in my angular custom element. I works fine when in the angular app but can't seem to bundle the material theme while building to custom element.
When i inspect the code outside of angular app, no style is attached to any of the cdk class. Everything seem to work fine when running in the angular server. How do i include the needed css with the custom element?
My app.module file
#NgModule({
[ ...
MatFormFieldModule,
MatIconModule,
MatSelectModule,
MatInputModule,
MatDialogModule,
...
],
providers: [ConnectBackendService],
entryComponents: [AppComponent, PopupComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const el = createCustomElement(AppComponent, { injector });
customElements.define('my-element', <Function>el);
}
ngDoBootstrap() {}
}
and my styles.css file
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
My dialog should have absolute positioning, should be aligned to the center of the window and should have a backdrop. Currently, none of these applies to the dialog box
I had the same issue and i reported it to Google on their GitHub page for Angular components. It is now tagged as "Low-priority issue that needs to be resolved" by Google.
https://github.com/angular/components/issues/15968
Just letting you and anyone else who sees this thread know so that they can find a possible future fix in my github post when/if Google fixes this issue.
Fixed it by going to angular.json file, changed extractCss property to false and added styles.js to build files
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.
I am quite New to typescript and I have tried to set up a typescript Project in Visual studio 2015 as HTML Application With Typescript. My problem is how to import or Reference highcharts without errors. I need a short description on how to set up the easist highchart in my typescript file. The description should explain from the start
1) creating the Project, and adding highchart (npm, tsd...) to the Project,
2) setting up the index.html file and app.ts (or the name of Your typescript file),
3) adding References in the html file and app.ts, especially in app.ts where you set import or References, like using import statement or
< reference path="typings/tsd.d.ts" />
< reference path="typings/highcharts/highcharts.d.ts" />
4) Set require statements and put into a variable
(I can't get this code to work ... Please use Your way to do this
var Highcharts = require('highcharts');
// Load module after Highcharts is loaded
require('highcharts/modules/exporting')(Highcharts);
// Create the chart
Highcharts.chart('container', { /*Highcharts options*/ });
5) Finally you render the highchart either in app.ts or by using the id in the index.html file
<div id="container" style="width:100%; height:400px;"></div>
I hope somebody can help me out here. I could of course have done all this in index.html but I want to make use of the debugging possibilities in typescript.
I'm trying to use the example accordion directive in my rails app but receive the following error and my browser crashes
Template for directive 'accordionGroup' must have exactly one root element.
template/accordion/accordion-group.html
My HTML view is the same as the example accordion (shortened for readability here)
<div ng-controller="AccordionDemoCtrl">
<accordion close-others="oneAtATime">
<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
</accordion>
</div>
My routes:
angular
.module('App', [
'ngRoute',
'templates',
'ui.bootstrap'
])
.when('/page', {
templateUrl: 'page.html',
controller: 'PageCtrl'
})
$locationProvider.html5Mode(true);
});
I'm also using the angular template gem and not sure if that has anything to do with it.
I had a similar error with angular bootstrap and this was due to using
ui-bootstrap.js instead of ui-bootstrap-tpls.js
It might be the BOM in your accordion template file causing an issue.
Open the file in a text editor that allows you to change the encoding (like Notepad++), alter the file to be UTF-8 without BOM and save. That should solve it (assuming that's the issue!).