I have installed angular-fontawesome using the instructions here:
https://www.npmjs.com/package/#fortawesome/angular-fontawesome
The icons show up when used in this fashion (app.component.html):
<div style="text-align:center">
<!-- simple name only that assumes the 'fas' prefix -->
<fa-icon icon="coffee"></fa-icon>
<!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
<fa-icon [icon]="['fa', 'fa-fw', 'fa-book']"></fa-icon>
</div>
My app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu';
import { TabMenuModule } from 'primeng/tabmenu';
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { library } from '#fortawesome/fontawesome-svg-core';
import { fas } from '#fortawesome/free-solid-svg-icons';
import { far } from '#fortawesome/free-regular-svg-icons';
import { TestcomponentComponent } from './testcomponent/testcomponent.component';
#NgModule({
declarations: [
AppComponent,
TestcomponentComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule,
ButtonModule,
MenuModule,
TabMenuModule,
FontAwesomeModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {
// Add an icon to the library for convenient access in other components
library.add(fas, far);
}
}
However, I get no icons when integrating it with a PrimeNg Module (in this case their TabMenuModule). Not doing anything unusual, just following the instructions here:
https://www.primefaces.org/primeng/#/tabmenu
app.component.ts
export class AppComponent {
title = 'ClientApp';
private items: MenuItem[];
ngOnInit() {
this.items = [
{label: 'Overview', icon: 'fa fa-fw fa-bar-chart'},
{label: 'Schedule', icon: 'fa fa-fw fa-calendar'},
{label: 'Documentation', icon: 'fa-coffee'},
{label: 'Support', icon: 'fa fa-fw fa-support'},
{label: 'Discussion', icon: 'fa fa-fw fa-twitter'}
];
}
I add these lines to top of the html:
<h3 class="first">Default</h3>
<p-tabMenu [model]="items1" [activeItem]="items1[0]"></p-tabMenu>
<h3>Templating</h3>
<p-tabMenu [model]="items2" [activeItem]="activeItem">
<ng-template pTemplate="item" let-item let-i="index">
<div style="position: relative; text-align: center; min-width: 10em">
<div class="ui-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" style="font-size: 2em"></div>
<div class="ui-menuitem-text">
{{item.label}}
</div>
<a tabindex="0" class="ui-menuitem-icon" (click)="closeItem($event, i)" style="position: absolute; right: -1em; top: -.5em; padding: 0" *ngIf="i !== 0">
<span class="pi pi-times"></span>
</a>
</div>
</ng-template>
</p-tabMenu>
<p-tabMenu [model]="items"></p-tabMenu>
<i class="far fa-chart-bar"></i>
angular.json:
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ClientApp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"src/styles.css"
],
I am using:
Angular CLI: 8.0.2
Node: 10.15.3
OS: win32 x64
Angular: 8.0.0
angular-fontawesome#0.4.0
free-solid-svg-icons#5.9.0
free-regular-svg-icons#5.9.0
Try adding these css entries into your styles.scss file, that is what it took in my case.
#import "~primeicons/primeicons.css";
#import "~primeng/resources/themes/saga-blue/theme.css";
#import "~primeng/resources/primeng.min.css";
#import "~primeflex/primeflex.css";
Related
Scenario:
I'm using directives from ng-matero for DateTime and using Angular Material for overall designing my application. Overall the functionality works fine. However angular material theme doesn't get apply on the dateTimepicker element as shown
Code
My app.module.ts file looks like this
import { HttpClientModule } from '#angular/common/http';
import { NgModule } from '#angular/core';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';
import { SearchComponent } from './components/search/search.component';
import { JourneysListComponent } from './components/journeys-list/journeys-list.component';
import { FlexLayoutModule } from '#angular/flex-layout';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MtxDatetimepickerModule } from '#ng-matero/extensions/datetimepicker';
import { MtxNativeDatetimeModule } from '#ng-matero/extensions/core';
#NgModule({
declarations: [
AppComponent,
SearchComponent,
JourneysListComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
MaterialModule,
FlexLayoutModule,
BrowserAnimationsModule,
MtxDatetimepickerModule,
MtxNativeDatetimeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
HTML
<div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center">
<mat-card class="box">
<mat-card-header>
<mat-card-title>Planner</mat-card-title>
</mat-card-header>
<form class="example-form">
<mat-card-content>
<mat-form-field class="example-full-width">
<input matInput placeholder="Origin" matInput required>
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Destination" matInput required>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-placeholder>Date & Time</mat-placeholder>
<mtx-datetimepicker #datetimePicker
[type]="type"
[mode]="mode"
[multiYearSelector]="multiYearSelector"
[startView]="startView"
[twelvehour]="twelvehour"
[timeInterval]="timeInterval"
[touchUi]="touchUi"
[timeInput]="timeInput"></mtx-datetimepicker>
<input [mtxDatetimepicker]="datetimePicker" [formControl]="datetime" matInput required>
<mtx-datetimepicker-toggle [for]="datetimePicker" matSuffix></mtx-datetimepicker-toggle>
</mat-form-field>
</mat-card-content>
<button mat-stroked-button color="accent" class="btn-block">Search</button>
</form>
</mat-card>
</div>
TS
import { Component, OnInit } from '#angular/core';
import {MtxCalendarView,MtxDatetimepickerMode,MtxDatetimepickerType} from '#ng-matero/extensions/datetimepicker';
import { MTX_DATETIME_FORMATS } from '#ng-matero/extensions/core';
import { UntypedFormControl } from '#angular/forms';
#Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss'],
providers: [
{
provide: MTX_DATETIME_FORMATS,
useValue: {
parse: {
dateInput: 'YYYY-MM-DD',
monthInput: 'MMMM',
yearInput: 'YYYY',
timeInput: 'HH:mm',
datetimeInput: 'YYYY-MM-DD HH:mm',
},
display: {
dateInput: 'YYYY-MM-DD',
monthInput: 'MMMM',
yearInput: 'YYYY',
timeInput: 'HH:mm',
datetimeInput: 'YYYY-MM-DD HH:mm',
monthYearLabel: 'YYYY MMMM',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
popupHeaderDateLabel: 'MMM DD, ddd',
},
},
},
],
})
export class SearchComponent implements OnInit {
type: MtxDatetimepickerType = 'datetime';
mode: MtxDatetimepickerMode = 'auto';
startView: MtxCalendarView = 'month';
multiYearSelector = false;
touchUi = false;
twelvehour = false;
timeInterval = 1;
timeInput = true;
datetime = new UntypedFormControl();
constructor() { }
ngOnInit(): void {
}
}
Question
Do I need to set theme exclusively for mtx-datetimepicker? if yes, How could I do that?
After import modules, you must define a theme.
#use '#ng-matero/extensions' as mtx;
#include mtx.all-component-themes($theme);
I have the following Test component:
Test.css
.SomeClass {
background-color: blue;
width: 100px;
height: 100px;
}
Test.tsx
import React from 'react';
import './Test.css';
export const Test = () => {
return (
<div className={'SomeClass'}>
hello
</div>
);
};
Relevant section of webpack config:
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: !isProduction,
modules: {
localIdentName: '[local]',
},
},
}],
},
The problem is that the styles are not applied. On inspection, the div looks like this:
<div class="SomeClass">hello</div>
but there is no "SomeClass" css.
I suspect it is to do with some webpack config. I tried this too: use: ['style-loader', 'css-loader'] instead of the above use array, but no luck.
Edit
This project uses react-jss.
I'm not sure if I found a bug or if my configuration is off. My other components render and look like they're supposed to. But material angular's button styles are not loading right.
I'm using material angular and the issue is with the raised button from here https://material.angular.io/components/button/overview
Here is my markup
<div class="nav-item">
<button class="mat-raised-button"
(click)="navToCreate()">
New Post
</button>
</div>
<div class="nav-item">
<button class="mat-raised-button" *ngIf="isLoggedIn === false" (click)="navToLogin()">
<i class="material-icons md-48">account_box</i>
<span>Login</span>
</button>
</div>
<div class="nav-item">
<button class="mat-raised-button" *ngIf="isLoggedIn === true" (click)="logOut()">
<i class="material-icons md-48">account_box</i>
<span>Logout</span>
</button>
</div>
And here is what they render as
Pic of buttons
My app.module is the following
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { NgModule } from '#angular/core';
import { ReactiveFormsModule } from '#angular/forms';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
// Material components
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatInputModule } from '#angular/material/input';
import { MatCardModule } from '#angular/material/card';
import { MatSnackBarModule } from '#angular/material/snack-bar';
import { MatSidenavModule } from '#angular/material/sidenav';
import { MatToolbarModule } from '#angular/material/toolbar';
import { MatTabsModule } from '#angular/material/tabs';
import { MatListModule } from '#angular/material/list';
import { MatButtonModule } from '#angular/material/button';
// Components
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { DiscussionCardComponent } from './components/discussion-card/discussion-card.component';
import { LoginComponent } from './components/login/login.component';
import { DiscussionDetailComponent } from './components/discussion-detail/discussion-detail.component';
import { SideMenuComponent } from './components/side-menu/side-menu.component';
import { DiscussionCreateComponent } from './components/discussion-create/discussion-create.component';
import { DiscussionDetailPageComponent } from './components/discussion-detail-page/discussion-detail-page.component';
import { TruncatePipe } from './pipes/truncate.pipe';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
DiscussionCardComponent,
LoginComponent,
DiscussionDetailComponent,
TruncatePipe,
SideMenuComponent,
DiscussionCreateComponent,
DiscussionDetailPageComponent,
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
ReactiveFormsModule,
FormsModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatInputModule,
MatCardModule,
MatSnackBarModule,
MatSidenavModule,
MatToolbarModule,
MatTabsModule,
MatListModule,
MatButtonModule,
],
exports: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Any help is appreciated. Thank you
your error is the mat-raised-button part. It is not a class, it is a property of the button.
<button mat-raised-button> is correct, <button class="mat-raised-button"> is using a class
I have the entry component in reactjs:
import React from "react"
import ReactDOM from 'react-dom';
import App from "./js/components/App.js"
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
I am trying to style in the root element inside of my css file, index.css:
#root {
background-color: brown;
height:100vh;
width:100vh;
}
The background though is not brown. When looking at the styling the browser renders I cannot see any of these attributes being applied to the root element.
This is my webpack config:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
use: ['css-loader'],
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
It is as if it is not loading the index.css file at all.
You cannot style the #root of your app. Just style the className of <App /> component, for example:
const App = () => (
<div className="app>
// ...
</div>
)
css file:
.app {
background-color: #ffffff;
background-color: brown;
height:100vh;
width:100vh;
}
When using webpack, i think you have to specify your entry points of your css/js files like this...
entry: [
"./src/js/index.js",
"./src/sass/style.scss",
],
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'assets/js')
},
module: {
rules: [
/* you code here */
...
...
I ejected my create-react-app in order to use css modules. I modified my webpack.config.dev.js from
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true, //added this
localIdentName: "[name]__[local]___[hash:base64:5]" //added this
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
}
Then I tried to uss css modules in one of my components
import React, { Component } from 'react';
import styles from './sidebar.css';
class MenuPanel extends Component {
render() {
return (
<div>
<div className={styles.navbarSide}>
<div className="tessact-logo"></div>
<div className="navbar-item active">
<a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a>
</div>
But className navbarSide didn't get applied to div. I see no className for that particular div. What am I doing wrong? Ideally that div should have got className navbarSide.
just add import { StyleSheet } from 'react-native';
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import styles from './sidebar.css';
class MenuPanel extends Component {
render() {
return (
<div>
<div className={styles.navbarSide}>
<div className="tessact-logo"></div>
<div className="navbar-item active">
<a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a>
</div>