Author: zero2full
Angular Material – #3 – Icon & Badge
import MatIconModule, import MatBadgeModule For Icon: https://material.io/resources/icons/?icon=alarm_on&style=baseline <mat-icon color = “primary | warn | accent”> icon code here </mat-icon> For Badge matBadge: show what badge is matBadgePosition: show where the badge locates, such as: below | above & before | after matBadgeSize: small | medium | large matBadgeOverlap: true(default) | false matBadgeColor matBadgeHidden
Angular Material – #2 – Button
import MatButtonModule Attribute for button appearance: mat-button: <button mat-button>…</button> mat-raised-button mat-fat-button mat-stroked-button mat-icon-button mat-fab mat-mini-fab Color Attribute for button color = “primary”: <button color = “primary” mat-button>…</button> color = “accent” color = “warn” disable ripple effect using disableRipple: <button color = “primary” mat-button disableRipple>…</button>
Angular Material – #1 – Typography
class = “mat-display-1” class = “mat-display-2” class = “mat-display-3” class = “mat-display-4” class = “mat-headling” // this is a heading for h1 class = “mat-title” // this is a heading for h2 class = “mat-subheading-2” // this is a heading for h3 class = “mat-subheading-1” // this is a heading for h4 class = “mat-body-1”
Section 26 Animation
To set up: npm install –save @angular/animation Steps to show animation: animation works with component: such as @Component({ selector: ‘app-name’, templateUrl: ‘…’, styleUrls: [], animation: [trigger(‘trigger-name’, […]), trigger(…)]}) using trigger() method to trigger the animation: trigger(name, […states…]) using state() method to represent different state status: state(name, style({…})) using transition() to make animation: transition(‘state 1 <=>
Section 25 Angular Universal
In order to let SEO to view you website content, it is better to use server pre-rendering page for the first time visit your page. So use Angular Universal to set up the server pre-rendering page.
Section 24 NgRx/effects
In order to deal with asynchronous responds, using ngrx side effects, install another package: npm install –save @ngrx/effects Actions: is one big observable which will listen all dispatched actions, and imported from @ngrx/effects ofType operator is unique for @ngrx/effects, which will filter actions and pass the actions observable (related to the ofType filter) to the
Section 24 NgRx/store
NgRx devtools: search: redux devtools extensions; then choose: zalmoxisus/redux-devtools-extension: Redux … – GitHub, then go to website: http://extension.remotedev.io/, choose browser you use. Set up NgRx devtools in Angular: npm install –save–dev @ngrx/store-devtools In app.module.ts file, import StoreDevtoolsModule from @ngrx/store-devtools in NgModule imports, StoreDevtoolsModule.instrument({ logOnly: environment.production}) (note: this environment is just environment, but not environment.prod.ts) Also
Section 23 Deploy
Using ng build –prod to compile TypeScript and Angular template to just HTML, CSS and JavaScript, which could be understood by browsers. In order to deploy you angular app (v 9.0) to subdirectory in your domain, you have to set <base href = “/subdirectory_folder/”>
Section 22 Module
Normally, one app can include: App Module: this is root module Feature Module: this is different sections of the App, normally, in this module, another routing module can be included that will be imported into Feature Module. For Feature Module, you have to declare the component, directive and pipe that will be used in this
Section 21 Dynamic Component
Recommend to use *ngIf to control the components already created However, you still can use programmatically create component, you have to create a component as type for the component factory using ComponentFactoryResolver.resolveComponentFactory(component type – first step export class) to create a component factory (the argument is the component you have already create) create a helper