Pass Values from Component to View in Angular 6

Create new folder named learnangular5withrealapps and select to this folder in Visual Studio Code

Open Terminal windows in Visual Studio Code and type: npm install -g @angular/cli to install Angular 6

Create new TypeScript 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;
  status: boolean;
  email: any;

  ngOnInit() {
    this.age = 20;
    this.fullName = 'abc';
    this.status = true;
    this.email = 'a@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>Status: {{status}}
<br>Email: {{email}}

In app.module.ts file in src\app folder. Add new component to module

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

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

Age: 20
Full Name: abc
Status: true
Email: a@gmail.com

I recommend you refer to the books below to learn more about the knowledge in this article:

Create New Project

Install Angular 6

Structure of Project

Create Component

Create View

Add Component to Module

Run Application

Output

References