ngModel
и ngIf
.<p *ngIf="ngxHide">Test element</p>
<mat-checkbox [(ngModel)]="ngxHide">
<span *ngIf="!ngxHide">Скрыть текст</span>
<span *ngIf="ngxHide">Показать текст</span>
</mat-checkbox>
<p [style.display]="ngxHide ? 'none' : 'block'">Test element</p>
ngIf
использовать предпочтительно, т.к она убирает ненужные блоки из DOM и view-дерева, а не просто их скрывает через css. this.createForm = this.fb.group({
...
contacts: this.fb.group({
telephones: ['', []],
emails: ['', []],
postals: ['', []]
})
});
<form [formGroup]="createForm">
<div formGroupName="contacts">
...
<input type="text" name="firstName" placeholder="" formControlName="emails">
...
import 'rxjs/add/observable/interval'
в нужных файлах.import { interval } from 'rxjs/observable/interval';
...
const intervalObs = interval(100);
...
import { Component } from '@angular/core';
import { interval } from 'rxjs/observable/interval';
import { takeWhile, tap } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
max = 1;
current = 0;
start() {
const intervalObs = interval(100);
intervalObs.pipe(
takeWhile(_ => isFinished),
tap(i => current += 0.1),
).subscribe();
}
<ng-content></ng-content>
https://angular.io/guide/lifecycle-hooks#content-p...<ng-content select="div"></ng-content>
...
@Component({
selector: 'app-component,[appComponent]',
templateUrl: '...',
})
export class AppComponent {
....
}
<div appComponent style="display: flex">
<!-- Внутри флекс элементы -->
</div>
let x = search$
.distinctUntilChanged()
.do(() => console.log('search called!'))
.mergeMap(() => query())
.shareReplay(1);
::ng-deep .tab-class {
background: red
}
ngOnInit() {
this.route.params.pluck('id').subscribe(id => {
this._PersonService.getPerson(+id).subscribe(person => this.person = person);
});
}
const Routes: Routes = [
{path: 'auto', loadChildren: './auto-module/auto.module#AutoModule'},
{path: 'avia', loadChildren: './avia-module/avia.module#AviaModule'},
{path: '', loadChildren: './entry-module/entry.module#EntryModule'},
];
{
path: '',
pathMatch: 'full',
redirectTo: 'entry',
},
{
path: 'entry',
loadChildren: 'entry-module/entry.module#EntryModule',
},
...
}
private svgElementFromString(str: string): SVGElement {
const div = document.createElement('div');
div.innerHTML = str;
const svg = div.querySelector('svg') as SVGElement;
return svg;
}
const el = this.el.nativeElement;
el.innerHTML = '';
this.renderer.appendChild(el, svg);
<div [innerHTML]="svg">
constructor(private sanitizer: DomSanitizer)
...
this.svg = this.sanitizer.bypassSecurityTrustHtml(svgString);
<ng-container *ngTemplateOutlet="comp"></ng-container>