Angular 4 Basics – A Tutorial On Basics Of Angular 4

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
[js]
//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 { }
[/js]

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
[js]
//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 {
}
[/js]

Generate a new component, using Angular 4-CLI

[js]
ng generate component newComponent
[/js]

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

[js]
import {Directive} from ‘@angular/core’;
@Directive({
selector: ‘my-directive’,
})
export class MyDirective {
}
[/js]

Iterate and display the list using ngFor

• App Component Filepath: app.component.ts

  [js]
  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’},
  ];
  [/js]

• Template Filepath: app.component.html

  [js]

  • {{tutorial.title}}

  [/js]

• Output of ngFor, it will display list simply

Check if/else using ngIf

• Simple if condition example

  [js]
  //ngFor will iterate if the tutorials.length is greater than 0

  • {{tutorial.title}}

  [/js]

• Simple if/else example, using reference variable

  [js]
  //Else has been defined with If

  • {{tutorial.title}}

  //Use of ng-template
  
  No Tutorials Found
  
  [/js]

Angular 4 styles using ngStyle

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

  [js]
  //If else and ngStyle is used in loop

  • 
    {{tutorial.title}}

  
  No Tutorials Found
  
  [/js]

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

• Build Your First Angular 4 Hello World
• Build Your First Angular 4 Form
• Grasp 8 Lifecycle Hooks In 8 Minutes

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?