Angular 4 Authentication Tutorial With Firebase

Angular 4 Authentication Tutorial with Firebase

In this tutorial i will go through the Authentication basics in Angular 4, i will show you how it's working and how to create a simple one.

How does Authentication work ?

Since Angular is a frontend scripting language it won't be opening a session with the backend, it will be sending the auth. information to the server using an api or else to verify, since you don't want to keep authenticating everytime the client wants to check information Angular will send a token to be used to keep/remember logged in users. Continue reading

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 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>