Task - One-way Binding - Interpolation

[akash-coded]

Create an Angular application that has a greet component.

The greet component is to display a welcome message with the user's full name.

The greet component class contains two data members: firstName and lastName. You can assign values to both in the component model, e.g., firstName = 'Akash' and lastName = 'Das'.

In the greet component template, you have to read the firstName and lastName from the component class and display the full name of the user along with a greeting message as follows:

Welcome, Akash Das!

BONUS: You can stylize the greeting message.

[abhi-ghute]

greet.component.ts

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

@Component({
  selector: 'app-greet',
  templateUrl: './greet.component.html',
  styleUrls: ['./greet.component.css']
})
export class GreetComponent {
  firstName:string="Abhishek";
  lastName:string="Ghute";
}

greet.component.html

<h3>Welcome, {{firstName+" "+lastName}}!</h3>

[twarit08]

greet.component.ts

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

@Component({
  selector: 'app-greet',
  templateUrl: './greet.component.html',
  styleUrls: ['./greet.component.css']
})
export class GreetComponent {
  firstName: string = 'Twarit'
  lastName: string = 'Soni'
}

greet.component.html

<div class="container bg-light text-center mt-3">
    <div class="jumbotron">
        <h1>Welcome,</h1>
        <h1>{{firstName + " " + lastName}} !</h1>
    </div>
</div>

[Indukuri-Bhargavi]

greet.component.ts

//app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firtname: string = 'Bhargavi';
  lastname:string='Indukuri'
}

greet.component.html

<!--app.component.html-->
<h2 style="color:blueviolet;">Welcome, {{firtname}} {{lastname}} !</h2>

[HeenaHafeez]

greet.component.ts

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

@Component({
  selector: 'app-greet',
  templateUrl: './greet.component.html',
  styleUrls: ['./greet.component.css']
})
export class GreetComponent {
  firstname : string="Heena"
  lastname : string="Hafeez";
}

greet.component.html

<h1>Welcome,{{firstname}} {{lastname}}!!</h1>

app.component.html

<app-greet></app-greet>

[ananthroy]

**greet.component.html**
<h3>Welcome, {{ firstname+" "+lastname}}!!</h3>

**greet.component.html**
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet',
  templateUrl: './greet.component.html',
  styleUrls: ['./greet.component.css']
})
export class greetComponent {
  firstname : string="Ananth"
  lastname : string="Roy";
}