Category: Udemy – Maximilian Schwarzmüller
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
Section 20 Authentication
Check email sign up and login API: google, key words: “firebase authentication rest api” Check loading spinner: google, key words: “css loading spinner” (https://loading.io/css/) Base on the REST API documentation, set up endpoint, data body… rxjs operators: tap, take, exhaustMap BehaviorSubject: always keep the last nexted data save data to local storage: localStorage.setItem/getItem/removeItem HttpInterceptor: auto
Section 18 Http
The Anatomy of Http request Http Verb: GET, POST, PUT, PATCH… URL (API Endpoint): /posts/1 Http Header (metadata): {“content-type”: “application/Json”} Http Body (POST, PUT, PATCH): data need to be stored back end {title: “new post”} Set up backend database, using BaaS (Backend As A Service) Firebase. website: https://console.firebase.google.com HttpClientModule is need to be imported into
Section 17 Pipe
Documentation: https://angular.io/api?query=pipe use pipe in template: {{ something-want-to-transform | pipe-name}} Build your own pipe: create a file with name: name.pipe.ts @Pipe({name: ‘pipeName, [pure: false] }) export class PipeNamePipe implements PipeTransform { transform(value, param1, param2…) { return value.someTransform… } } declare Pipe in app.module.ts ( or where the component using this Pipe) If Pipe accepts arguments,