Using ngIf to conditionally display app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'] }) export class AppComponent { name = "John"; } app.component.html <div> <h1> <div *ngIf="name">Hello {{name}}</div> </h1> </div> Using ngIf with custom objects fruit.ts export class Fruit { constructor(public id: number, public name: string){ } } …
Continue reading Angular ngIf exampleangular
In this article, we will see how to loop through an array using ngFor in Angular. Looping through array of Strings in angular using ngFor app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'] }) export class AppComponent { message = 'Hello World'; fruits = ['Apple', 'Banana', 'Orange', 'Pineapple']; } …
Continue reading Looping through an array using ngFor in AngularIn this article, we will install Angular CLI using npm and create and run a Hello World app. 1. Installing Angular CLI For installing angular, first make sure you have node and npm installed and then run the following from command prompt. npm install -g @angular/cli This should install latest angular version. You should …
Continue reading Angular 7 Hello World