Category: Angular

Angular

*ngIf Directive in Angular 2

NgIf is a built-in template directive that adds or removes parts of the DOM depending on if the expression passed to it is true or false: <div *ngIf="userHasPet"> {{ user.pet.name }} </div> In the above, if userHasPet is true, then the div will be included in the DOM (it will be on the page), and […]

Angular

*ngFor Directive in Angular

NgFor is a built-in template directive that makes it easy to iterate over something like an array or an object and create a template for each item. This post covers Angular 2 and up Here’s a basic example of its use: <ul> <li *ngFor="let user of users">{{ user.name }}</li> </ul> This will output html that […]

Angular

Creating Custom Pipes in Angular

Pipes in Angular 2+ are a great way to transform and format data right from your templates. Out of the box you get pipes for dates, currency, percentage and character cases, but you can also easily define custom pipes of your own. Here for example we create a pipe that takes a string and reverses […]

Angular

Deploying an Angular App to Firebase Hosting

Let’s assume you have an Angular 2+ app that was created using the Angular CLI. The CLI gives you easy access to a build command that makes it easy to prepare a project to be deployed to production. Then, the Firebase CLI npm package makes it a breeze to deploy to a Firebase Hosting instance. […]

Angular

Content Projection in Angular with ng-content

AngularJS had transclusion, and Angular gets content projection with the use of <ng-content></ng-content>. This post covers Angular 2 and up. Let’s say you have a home component with a decorator that goes a bit like this: @Component({ selector: ‘home’, template: ` <h1>Heroic Title</h1> <p>Something good…</p> ` }) And let’s say you want to be able […]