Angular 5 first tutorial

Hello friends,

This tutorial is all about to your first step towards Angular 5.

Prerequisites

To start with Angular 5 your computer should have any editor installed we prefer VSCode here and also make sure Node is installed and working.

Install Angular 5

Open Terminal windows in Visual Studio Code (short key ctrl+c) and type:

npm install -g @angular/cli

Create Component:

create new component using command : ng generate component  componentName (in my example component name is :app.component)

Create new file, named app.component.ts in src\app folder. In this component, create values to pass view

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {

  age: number;
  fullName: string;
  Gender: string;
  email: any;
  

  ngOnInit() {
    this.age = 30;
    this.fullName = 'vishal';
    this.Gender= 'male';
    this.email = 'vishal@gmail.com';
  }

}

Create new file, named app.component.html in src\app folder. In this view, show values from component

Age: {{age}}
<br>Full Name: {{fullName}}
<br>Gender: {{gender}}
<br>Email: {{email}}

when you add new component say (app.componet using command ) this component automatically add in  app.module.ts file below is the structure of app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

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

export class AppModule { }

Run Application

In Terminal windows in Visual Studio Code and type: ng serve –open, program will open url http://localhost:4200/ on browser

Output

Age: 30
Full Name: vishal
Gender: male
Email: vishal@gmail.com
 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

code