Category: Angular

@ViewChild

Posted on by marioosh

@ViewChild can access only local template of component, not parent or child components. @Component({ selector: ‘app-login’, template: ` <re-captcha></re-captcha> <div #refname></div> `, styleUrls: [’./login.component.css’] }) export class LoginComponent implements OnInit, AfterViewInit {   @ViewChild(RecaptchaComponent) reCaptcha: RecaptchaComponent; @ViewChild(’refname’) input: ElementRef;   constructor() { console.log(this.reCaptcha); // null }   ngAfterViewInit(): void { console.log(this.reCaptcha); // not null } Read more about @ViewChild[…]

Scroll two divs simultaneously

Posted on by admin

On example of diff2html result let sides = this.diffResult.nativeElement.querySelectorAll(’.d2h-file-side-diff’); sides.forEach((sideDiv,idx) => { sideDiv.addEventListener(’scroll’, (event) => { let scrollLeft = event.target.scrollLeft; sides[idx==0?1:0].scrollLeft = scrollLeft; }); });let sides = this.diffResult.nativeElement.querySelectorAll(‘.d2h-file-side-diff’); sides.forEach((sideDiv,idx) => { sideDiv.addEventListener(‘scroll’, (event) => { let scrollLeft = event.target.scrollLeft; sides[idx==0?1:0].scrollLeft = scrollLeft; }); });

*ngTemplateOutlet

Posted on by admin

<ng-template #toolbar> lorem ipsum… </ng-template>   <!– put my template here –> <ng-container *ngTemplateOutlet="toolbar"></ng-container>   <!– and here –> <ng-container *ngTemplateOutlet="toolbar"></ng-container>   <!– and here, too 😉 –> <ng-container *ngTemplateOutlet="toolbar"></ng-container><ng-template #toolbar> lorem ipsum… </ng-template> <!– put my template here –> <ng-container *ngTemplateOutlet="toolbar"></ng-container> <!– and here –> <ng-container *ngTemplateOutlet="toolbar"></ng-container> <!– and here, too 😉 –> <ng-container Read more about *ngTemplateOutlet[…]

nested form group

Posted on by admin

this.form = this.fb.group({ ‘name’:[”], ‘nested’: this.fb.group({ ‘date’:[”] // … }) });this.form = this.fb.group({ ‘name’:[”], ‘nested’: this.fb.group({ ‘date’:[”] // … }) }); <form [formGroup]="form" > <input formControlName="name" … /> <div formGroupName="nested"> <input formControlName="date" … /> </div> </form><form [formGroup]="form" > <input formControlName="name" … /> <div formGroupName="nested"> <input formControlName="date" … /> </div> </form>

AsyncPipe example

Posted on by admin

@Component({ … }) export class TestingComponent implements OnInit { units: any; constructor(private restService:RestService) { } ngOnInit() { this.units = this.restService.getUnits(); } }@Component({ … }) export class TestingComponent implements OnInit { units: any; constructor(private restService:RestService) { } ngOnInit() { this.units = this.restService.getUnits(); } } Template <ng-template #loading>Loading…</ng-template> <div *ngIf="units|async as units; else loading"> <span *ngFor="let unit Read more about AsyncPipe example[…]

Angular: Reference variable in templates

Posted on by admin

Inside templates: <input type="text" #name> <input type="text" #surname> <button (click)="someMethod(name,surname)">Test</button><input type="text" #name> <input type="text" #surname> <button (click)="someMethod(name,surname)">Test</button> Inside component: import {ViewChild, ElementRef} from ‘@angular/core’; // … @ViewChild(’name’) nameRef: ElementRef;import {ViewChild, ElementRef} from ‘@angular/core’; // … @ViewChild(‘name’) nameRef: ElementRef;