Create Custom Pipe in Angular 4

Create Custom Pipe in Angular

Watch Angular 4 Custom Pipe Video Tutorial

Custom Pipe in Angular 4

In Angular 4 you can create your own pipes as well as using the built-in ones.

Create your first Angular pipe

Run below command from the cmd while inside the working project folder. 'replace nameOfPipe with your pipe name'

ng g pipe nameOfPipe

Continue reading

Angular 4 Routing and Navigation Tutorial

Angular 4 Routing and Navigation Example

Angular 4 Routing Example

In Angular 2 and Angular 4 you can navigation between pages without the need of reloading the whole page.

Angular 4 Router

By using Angular router you can move from one page to another without reloading the whole page.

Angular 4 Router Example

In the following example i will create a page with two links, each link will change the content of the page without going to a different url. Continue reading

What are Pipes in Angular 4

Angular 4 Pipes Tutorial

Angular 4 Pipes Tutorial

Angular 4 Video Tutorials

Pipes are a way to convert, filter or transform one data to another format. For example you can use a pipe to convert all your strings to uppercase, Earlier in Angular 1.x the same function was there under filter.

Angular 2 and Angular 4 they come with built in pipes, a variety to use without writing any extra code, you can also create your own pipes to use them later in you code.

Using Pipes

Pipes symbols is '|' and it can be use by following the below syntax:

<h1>My name is {{name | uppercase}}</h1>

Continue reading

Angular 4 Directives with Examples

Using Directives in Angular 4

Angular 4 Directives - ngFor ngIf ngClass ngStyle

In this tutorial we will be using different structural directives in Angular 4 ngFor, ngIf also we will be using attributes and property bind it like ngClass and ngStyle attributes.

In Angular 4 whenever you use structural directive you should always add '*' before it.

Structural and attribute directives which will be discussed in this tutorial:
  • ngFor
  • ngIf
  • ngClass
  • ngStyle

Continue reading

Angular 4 Arrays and Objects

Initializing Objects and Arrays in Angular 4 and Use Them.

In this tutorial i will show you how to initialize both Objects and Arrays in Angular 4 as well as listing them in your html.

Initializing an Object in Angular 4

To initialize an Object this should be done inside the component class

export class AppComponent {
car1={
engine: 3.5,
model: 2008 ,
brand: 'Toyota'
};
}

To call the car1 brand from the HTML  then you specify the object and it's property

<h1>My car brand is {{car1.brand}}</h1>

Initializing Angular 4 Array

To initialize an Array this should be done inside the component class

cars = ['Toyota', 'Honda','Chevrolet'];

List Array in Angular 4

Listing an Array in Angular 4 can be done using the 'ngFor' directive, below is an example for the 'ngFor' syntax: "This should be used inside the Component HTML"

<tr *ngFor="let car for cars"><td>{{car}}</td></tr>