That is a use-case for @ViewChild: https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html class XComponent { @ViewChild(‘ipt’, { static: true }) input: ElementRef; ngAfterViewInit() { // this.input is NOW valid !! } somefunction() { this.input.nativeElement…… } } Here’s a working demo:
update Angular 5 ngOutletContext was renamed to ngTemplateOutletContext See also CHANGELOG.md @ angular/angular original Templates (<template>, or <ng-template> since 4.x) are added as embedded views and get passed a context. With let-col the context property $implicit is made available as col within the template for bindings. With let-foo=”bar” the context property bar is made available … Read more
angular-cli resolves this by providing an –output-hashing flag for the build command (versions 6/7, for later versions see here). Example usage: ng build –output-hashing=all Bundling & Tree-Shaking provides some details and context. Running ng help build, documents the flag: –output-hashing=none|all|media|bundles (String) Define the output filename cache-busting hashing mode. aliases: -oh <value>, –outputHashing <value> Although this … Read more
You can use the | async pipe: <div *ngIf=”(list$ | async)?.length==0″>No records found.</div> Update – 2021-2-17 <ul *ngIf=”(list$| async) as list; else loading”> <li *ngFor=”let listItem of list”> {{ listItem.text }} </li> </ul> <ng-template #loading> <p>Shows when no data, waiting for Api</p> <loading-component></loading-component> </ng-template> Update – Angular Version 6: If you are loading up a … Read more
UPD Since Angular 14, it is possible to bind protected components members in the template. This should partially address the concern of exposing internal state (which should only be accessible to the template) as the component’s public API. No, you shouldn’t be using private variables in your templates. While I like the drewmoore’s answer and … Read more
Create an Enum: enum ACTIVE_OPTIONS { HOME = 0, USERS = 1, PLAYERS = 2 } Create a component, be sure your enum list will have the typeof: export class AppComponent { ACTIVE_OPTIONS = ACTIVE_OPTIONS; active: ACTIVE_OPTIONS; } Create a template: <li [ngClass]=”{ ‘active’: active === ACTIVE_OPTIONS.HOME }”> <a routerLink=”/in”> <i class=”fa fa-fw fa-dashboard”></i> Home … Read more
Figured out quick solution, update your @NgModule code like this : import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { FormsModule } from ‘@angular/forms’; import { AppComponent } from ‘./app.component’; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } … Read more
Edit : Now it is documented <ng-container> to the rescue The Angular <ng-container> is a grouping element that doesn’t interfere with styles or layout because Angular doesn’t put it in the DOM. (…) The <ng-container> is a syntax element recognized by the Angular parser. It’s not a directive, component, class, or interface. It’s more like the curly braces in a … Read more
Two way to truncate text into angular. let str=”How to truncate text in angular”; 1. Solution {{str | slice:0:6}} Output: how to If you want to append any text after slice string like {{ (str.length>6)? (str | slice:0:6)+’..’:(str) }} Output: how to… 2. Solution(Create custom pipe) if you want to create custom truncate pipe import … Read more
Add BrowserModule to imports: [] in @NgModule() if it’s the root module (AppModule), otherwise the CommonModule. // older Angular versions // import {BrowserModule, CommonModule} from ‘@angular/common’; import { BrowserModule } from ‘@angular/platform-browser’ .. .. @NgModule({ imports: [BrowserModule, /* or CommonModule */], .. })