Category: Angular
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,
Section 15 Form – Reactive Angular form
In ts file, declare a property for the form, which type should be FormGroup: such as: signupForm: FormGroup; Initiate the form in ngOnInit() method: signupForm = new FormGroup({ propertyName1: new FormControl(defaultName, validator, validator), propertyName2: new FormControl(defaultName, Validators.required / [Validators.required, Validators.email, …], validator), …}); synchronize the form you create with the form in template binding the
Section 15 Form – Template-Drive Angular form
Template-Drive angular form ngSubmit is used as listener to handle submit In order to check form object automatically generated by Angular, you can use the following method: <form (ngSubmit) = “onSubmit(f) #f = “ngForm”> … </form> Assign “ngModel” for every form control to let Angular know this element is form control: <input type=”text” name=”name” ngModel>
Section 11 Guards
canActivate, canActivateChild, canDeactivate, resolve