Creating library inside Anuglar app to make reusable in another projects. Making utils-lib library, default prefix fo selectors will be utils $ ng g library utils-lib –prefix utils$ ng g library utils-lib –prefix utils Create simple directive in previously created library: $ ng g d simple –project utils-lib –export$ ng g d simple –project utils-lib Read more about Library in Angular project[…]
Usage of @Optional (optional dependency), for example when LoginComponent is used as dialog or standalone. import { Optional } from ‘@angular/core’; constructor( @Optional() private dialogRef: MatDialogRef<LoginComponent>, ) { … } import { Optional } from ‘@angular/core’; constructor( @Optional() private dialogRef: MatDialogRef<LoginComponent>, ) { … }
let form = this.fb.group({ ‘hotelLocation’:[null] }); form.get(’hotelLocation’).valueChanges.subscribe(v => { // HERE !! let prevVal = this.form.value[’hotelLocation’]; });let form = this.fb.group({ ‘hotelLocation’:[null] }); form.get(‘hotelLocation’).valueChanges.subscribe(v => { // HERE !! let prevVal = this.form.value[‘hotelLocation’]; });
selector: ‘app-test[id]‘ Component({ selector: ‘app-test[id]’ // id is required now }); export class TestComponent { @Input() id:number; }Component({ selector: ‘app-test[id]’ // id is required now }); export class TestComponent { @Input() id:number; }
On the end i need response from BOTH requests, but need chain them, because second request need something from first response. import { switchMap, map } from ‘rxjs/operators’; this.restService.getFile(id) .pipe( switchMap((file:File) => this.restService.renderMd(file.markdown_id) .pipe(map((markdown:any) => { return { file:file, markdow: markdown }; })) ) ).subscribe((result:any) => { // I have results for two requests Read more about rx.js – chain requests when need response from BOTH[…]
import { Component, HostBinding, Input, OnInit } from ‘@angular/core’; @Component({ selector: ‘app-host’, template: `<p>host works!</p>`, styles: [`:host(.someClass){ color: red; }`] }) export class HostComponent implements OnInit { @Input(’idVal’) @HostBinding(’id’) id:string = ‘defaultId’; @Input() @HostBinding(’class.someClass’) withClass:boolean = true; constructor() { } ngOnInit(): void { } }import { Component, HostBinding, Input, OnInit Read more about @HostBinding example[…]
Steps add file.json to src/assets directory use this.http.get('assets/file.json'); in HttpClient import { Injectable } from ‘@angular/core’; import { HttpClient } from ‘@angular/common/http’; @Injectable({ providedIn: ‘root’ }) export class ApiService { constructor(private http: HttpClient) { } getLocalJson() { return this.http.get(‘assets/file.json’); } }
updateValueAndValidity() works for control, but NOT for children ! form:FormGroup; constructor(private fb:FormBuilder) { } initForm() { this.form = this.fb.group({ ‘files’:[”, [this.fv.bind(this)]] }); } /** * my validator */ fv(fc:AbstractControl) { console.log(’validate’, fc); // … } /** * func that need to revalidate ‘files’ field */ someFunc() { // … this.form.updateValueAndValidity(); // NOT Read more about updateValueAndValidity();[…]
I don’t need result from first request, but need their response for second request (`switchMap` will be working, too) import { mergeMap } from ‘rxjs/operators’; this.http.get(’/request1’).pipe( mergeMap((resp1:any) => this.http.post(’/request2′, resp1) ) ).subscribe(res => { // I have result from second request only console.log(res); });import { mergeMap } from ‘rxjs/operators’; this.http.get(‘/request1’).pipe( mergeMap((resp1:any) => this.http.post(‘/request2’, resp1) Read more about rx.js – chain requests[…]
<a [routerLink]="" queryParamsHandling="preserve" (click)="func()">Do something</a><a [routerLink]="" queryParamsHandling="preserve" (click)="func()">Do something</a>