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){ } } […]
Category: angular
Looping through an array using ngFor in Angular
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']; } […]
Angular 7 Hello World
In 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 […]