Angular 4 Basics – A Tutorial On Basics Of Angular 4

By Mohit Tanwani Last updated Jan 30, 2018

This page will give you an understanding of Angular 4 Basics.

Getting started with Angular 4 Basics

AngularJs will allow you to create reactive Single Page Applications (SPAs). Angular 4 will give a user an awesome experience with the web application.

You might be aware of Angular 1.x and Angular 2.x, this tutorial will introduce features and basics of Angular 4. Angular 4 has a lot newer things that you should know like Module, Component, Services, Directives. Therefore, I thought let’s share a tutorial on basics of Angular 4.

Suggested visit, Angular 2 vs Angular 4 – 5 Minutes WalkThrough

What is an App Module?

Every Angular app has at least one NgModule class, the root module, named AppModule. NgModule is a decorator function that takes a single metadata object whose properties describe the module.

The most important properties are:

Declarations – this module will have three kinds of view classes: components, directives, and pipes.
Exports – the set of declarations that should be gettable and usable in the component templates of other modules.
Imports – exported classes are needed to declared in this module.
Providers – once you provide a service under providers, they become accessible in all parts of the app.
Bootstrap – the main application view, called the root component, that hosts all app views. Only the main module should have this bootstrap property.

Now, let’s see an example of a App Module

//Import browser module
import { BrowserModule } from '@angular/platform-browser';
//Import NgModule
import { NgModule } from '@angular/core';
// Import App Component
import { AppComponent } from './app.component';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

What is a component in Angular 4?

A component is itself a class that can be reused throughout the web application. Components will split up your web application into different parts, it has own business logic, an HTML template, and a CSS file.

Basically, a component is a reusable, replicable class which controls a patch of the screen called a view and by using this, we can avoid to create everything in a single file.

To build a complex web application, multiple components will require with each component plays an important role, like header will have its own component, the footer will have its own component, and so on.

Now, let’s see an example of a simple component

//Import component from core of Angular
import { Component} from '@angular/core';
//Decorator with a selector, template source, and style sources.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
//Export class
export class AppComponent {
}

Generate a new component, using Angular 4-CLI

ng generate component newComponent

What is Directive in Angular 4?

Directives are the instructions in the DOM.

Directive decorator allows you to mark a class as an Angular directive and provide additional metadata that defines how the directive should be processed, instantiated and used at runtime.

Here is an example how directive looks Get me deep into Directive

import {Directive} from '@angular/core';
@Directive({
selector: 'my-directive',
})
export class MyDirective {
}

Iterate and display the list using ngFor

App Component Filepath: app.component.ts

tutorials = [
//1st index
{'title': 'Angular 4 Hello World', 'link': 'http://www.thetechieshouse.com/angular-4-hello-world'},
//2nd index
{'title': 'Angular 4 Reactive Forms', 'link': 'http://www.thetechieshouse.com/angular-4-reactive-forms'},
//3rd index
{'title': 'Angular 4 Firebase', 'link': 'http://www.thetechieshouse.com/angular-4-firebase'},
//4th index
{'title': 'Angular 4 Basics', 'link': 'http://www.thetechieshouse.com/angular-4-basics'},
];

Template Filepath: app.component.html

  <ul>
    <li *ngFor="let tutorial of tutorials">
      <a href="{{tutorial.link}}" target="_blank">{{tutorial.title}}</a>
    </li>
  </ul>

Output of ngFor, it will display list simply

Check if/else using ngIf

Simple if condition example

//ngFor will iterate if the tutorials.length is greater than 0
<div *ngIf="tutorials.length">
  <ul>
    <li *ngFor="let tutorial of tutorials">
      <a href="{{tutorial.link}}" target="_blank">{{tutorial.title}}</a>
    </li>
  </ul>
</div>

Simple if/else example, using reference variable

//Else has been defined with If
<div *ngIf="tutorials.length; else noTutorialsFound">
  <ul>
    <li *ngFor="let tutorial of tutorials">
      <a href="{{tutorial.link}}" target="_blank">{{tutorial.title}}</a>
    </li>
  </ul>
</div>
//Use of ng-template
<ng-template #noTutorialsFound>
  No Tutorials Found
</ng-template>

Angular 4 styles using ngStyle

Use of ngStyle with ngFor, change the background color based on condition

//If else and ngStyle is used in loop
<div *ngIf="tutorials.length; else noTutorialsFound">
  <ul>
    <li 
      *ngFor="let tutorial of tutorials; let i=index" 
      [ngStyle]="{'background-color': i%2 == 0 ? 'brown' : 'lime'}"  
    >
      <a href="{{tutorial.link}}" target="_blank">{{tutorial.title}}</a>
    </li>
  </ul>
</div>
<ng-template #noTutorialsFound>
  No Tutorials Found
</ng-template>

Output of ngStyle background color

I am sure, now, you got an idea about Angular 4 Basics!

Finally, few suggested visits that will help you to move further in Angular 4,

Moreover, if you’ve any questions/suggestions feel free to hit comments below.

BTW, which IDE you’re using to build your Angular 4 app?