Category: Udemy – Maximilian Schwarzmüller
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
Section 11 Router & Routing
Set up route: const routes: Routes = [ {path: ”, component: HomeComponent}, //localhost:4200/ {path: ‘aaa’, component: AaaComponent, //localhost:4200/aaa children: [ {path: ‘:id’, component: AaaSubComponent} //localhost:4200/aaa/abc(id is value) ]} , {path: ‘**’, redirectTo: ‘/’} ] import: RouterModule to app.module.ts file’s @NgModule({imports: [RouterModule.forRoot(routes)]}) You also can set up routing.module.ts file and then import to app.module.ts file
Section 11 Routing queryParams & fragment
Using routerLink method: <a [routerLink] = “[‘/sample’, 1, ‘test’]” [quetyParams] = “{product: ‘apple’, amount: 5}” [fragment] = “‘color’”> sample </a> the output URL is: localhost:4200/sample/1/test?product=apple&amount=5#color Using router.navigate() method: this.router.navigate([‘/sample’, 1, ‘test’], {queryParams: {product: ‘apple’, amount: 5}, fragment: ‘color’}); the output URL is: localhost:4200/sample/1/test?product=apple&amount=5#color for navigate() method, several arguments need to know this.route.navigate([‘address’], {queryParams:{key, value}, relateTo:
Section 11 Routing ActivatedRoute
ActivatedRoute service: snapshot property and snapshot.params property: activatiatedRoute.snapshot.params[‘param name’] params (Observable): activatedRoute.params.subscribe((param: Params) => {…} )
Section 11 Routing
In order to route different component, you have to set up router in the app.module.ts file const myRoutes: Routes = [ {path: ‘xxx’, component: ComponentName} ]; imports: […, RouterModule.forRoot(myRoutes)] <router-outlet>/</router-outlet> represents where should render the contents routerLink directive sets up the links, two methods can be use: (1) <a routerLink = “/address” (directly write the
Section 9 Service
Service file is wrote by TypeScript, and don’t need to add decorator @, but if the current service file is need to inject other service from other service file, it need to add decorator: @Injectable(). So right now Angular suggests add @Injectable() in any service files, no matter what it is needed to inject or
Section 7 Directive & @HostListener & @HostBinding
ng generate directive directvie-name ng g d directive-name @Directive({selector: ‘[directiveName]’}) export class directiveNameDirective {} @Directive({ selector: ‘[appHighlight]’ }) export class HightlightDirective implements OnInit { constructor(private elementRef: ElementRef){} ngOnInit() { this.elementRef.nativeElement.style.backgroundColor = ‘gree’; //this will overwrite the style of the element that uses the attribute ‘appHighlight’ } } @Directive({ selector: ‘[appBetterHighlight]’ }) export class BetterHighlightDirective implements
Section 5 – 73 Local references & @ViewChild() & @ContentChild() decorator
You can put local references in any template of your angular app, and start with #, such as <input type=”text” id=”test” #localReference>, so you can only use this local reference in this template but not in typescript. Notice, this local reference represents the whole element, such as #localReference represent the whole input element that includes