Tutorial – 25 – Routing & Navigation

Tutorial – 25 – Routing & Navigation

The Angular Router enables navigation from one view to the next as users perform application tasks. Routes & RouterModule import {Routes, RouterModule} from “@angular/router”; Route Configuration A routed Angular application has one singleton instance of the Router service. When the browser’s URL changes, that router looks for a corresponding Route from which it can determine the component to display. const routes: Routes = [ { […]

Read More 1 Comment

Tutorial – 24 – HttpClient

Tutorial – 24 – HttpClient

The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. import { HttpClientModule } from ‘@angular/common/http’; The http client is a service that you can inject into your classes in Angular, like so: import { Http, Response, RequestOptions, Headers } from ‘@angular/http’; class MyClass { constructor(private http: Http) { } } HTTP Verbs In the HTTP protocol […]

Read More Leave comment

Tutorial – 23 – Dependency Injection

Tutorial – 23 – Dependency Injection

Dependency Injection Dependency Injection is a coding pattern in which a component takes the instances of objects it needs which is called dependencies from an external source rather than creating them itself. In Angular, services are Singleton. It internally implements the Service Locator Pattern. This means each service register itself under one container as a single instance. Angular provides a built in Injector which acts as […]

Read More Leave comment

Tutorial – 22 – Template Driven Forms

Tutorial – 22 – Template Driven Forms

Basic setup index.html <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>Demo</title> <base href=”/”> <meta name=”viewport”content=”width=device-width, initial-scale=1″> <link rel=”icon”type=”image/x-icon”href=”favicon.ico”> <!– Latest compiled and minified CSS –> <link rel=”stylesheet” href=”./css/bootstrap.min.css”> <!– jQuery library –> <script src=”./jquery/3.3.1/jquery.min.js”></script> <!– Latest compiled JavaScript –> <script src=”./bootstrap/3.3.7/js/bootstrap.min.js”></script> </head> <body> <app-root></app-root> </body> </html> Form setup app.component.html <div class=”container”> <h1 class=”well”>Registration Form</h1> <div class=”col-lg-12 well”> <div class=”row”> <form #f=”ngForm”> <div class=”col-sm-12″> <div class=”row”> […]

Read More Leave comment

Tutorial – 21 – Model Driven Form Validation

Tutorial – 21 – Model Driven Form Validation

Basic setup index.html <!doctype html> <html lang=”en”> <head> <metacharset=”utf-8″> <title>Demo</title> <basehref=”/”> <metaname=”viewport”content=”width=device-width, initial-scale=1″> <linkrel=”icon”type=”image/x-icon”href=”favicon.ico”> <!– Latest compiled and minified CSS –> <link rel=”stylesheet” href=”./css/bootstrap.min.css”> <!– jQuery library –> <script src=”./jquery/3.3.1/jquery.min.js”></script> <!– Latest compiled JavaScript –> <script src=”./bootstrap/3.3.7/js/bootstrap.min.js”></script> </head> <body> <app-root></app-root> </body> </html> Form setup app.component.html <div class=”container”> <h1 class=”well”>Registration Form</h1> <div class=”col-lg-12 well”> <div class=”row”> <form [formGroup]=”myform”> <div class=”col-sm-12″> <div class=”row”> <div class=”col-sm-6 form-group”> <label>First […]

Read More Leave comment

Tutorial – 20 – Model Driven Forms

Tutorial – 20 – Model Driven Forms

There are two ways to build forms in Angular 5, namely template-driven and model-driven. In this article, we will learn about building model-driven form. Basic setup index.html <!doctype html> <html lang=”en”> <head> <metacharset=”utf-8″> <title>Demo</title> <basehref=”/”> <metaname=”viewport”content=”width=device-width, initial-scale=1″> <linkrel=”icon”type=”image/x-icon”href=”favicon.ico”> <!– Latest compiled and minified CSS –> <link rel=”stylesheet” href=”./bootstrap/3.3.7/css/bootstrap.min.css”> <!– jQuery library –> <script src=”./jquery/3.3.1/jquery.min.js”></script> <!– Latest compiled JavaScript –> <script src=”./bootstrap/3.3.7/js/bootstrap.min.js”></script> </head> <body> <app-root></app-root> </body> […]

Read More Leave comment

Tutorial – 19 – Lifecycle Hooks

Tutorial – 19 – Lifecycle Hooks

A component has a lifecycle managed by Angular. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM. Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur. A directive has the same set of lifecycle hooks. After creating […]

Read More Leave comment

Tutorial – 18 – Template expression operators

Tutorial – 18 – Template expression operators

The template expression operators are special operators for JavaScript syntax. The pipe operator ( | ) Pipes are simple functions that accept an input value and return a transformed value.For example, you might display a number as a currency, force text to uppercase, or filter a list and sort it. app.component.html <div>Title through uppercase pipe: {{title | uppercase}}</div> <div>{{currentHero | json}}</div> DatePipe <h4>1. Today is […]

Read More Leave comment

Tutorial – 17 – Services

Tutorial – 17 – Services

Services are the class which fetch or save data directly from database or other services , responsible for the operation like Insert, Update , Delete…. Why services Components shouldn’t fetch or save data directly and they certainly shouldn’t knowingly present fake data. They should focus on presenting data and delegate data access to a service. Share the data between components. Implements the Business Logic Importing […]

Read More Leave comment

Tutorial – 16 – Component Interaction

Tutorial – 16 – Component Interaction

Input and Output properties An Input property is a settable property annotated with an @Input decorator. Values flow into the property when it is data bound with a property binding An Output property is an observable property annotated with an @Output decorator. The property almost always returns an Angular EventEmitter. Values flow out of the component as events bound with an event binding. Input properties […]

Read More Leave comment
Visitors
Page Hits: 56786
Unique Visitors :
14626
Made With By Keshab