Angular 2 Building Blocks Hands-On Solution | TCS Fresco Play

0
Angular 2 Building Blocks Hands-On Solution | TCS Fresco Play


Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.

Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).

All Question of the MCQs Present Below for Ease Use Ctrl + F with the question name to find the Question. All the Best!  

 

Angular 2 Building Blocks Hands-On Solutions

The Course Id is 55105.


1. My Activity Tracker in Angular 


app.component.ts


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


@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  //Define your variables done,todos,newToDo,newToDoObj,error

  //Define your constructor here with todos as [] ,newToDo as '' and error as false

  //Define your addMore function here

  //Define your clearAll function here

  public done: boolean;

  public todos: any;

  public newToDo: string;

  public newToDoObj: any;

  public error: boolean;

  //public TODOS : Array;

  constructor(){

    this.todos = [];

    this.newToDo = '';

    this.error = false;

  }

  addMore(){

   this.todos.push({done: true, item: this.newToDo});

  }

  clearAll(){

  this.todos = [];

 }

}


2. My First App With Angular




Create an Angular Application: -


app.component.ts:-


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


@Component({

  // Add your code here for both selector and template

  selector: 'app-root',

  template:'<h1>My first angular app </h1>'

})

export class AppComponent {}


3. Interpolation in Angular:- 




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


@Component({

  selector: 'app-root',

  template: `<h1>{{message}}</h1>`

})

export class AppComponent {

  message = 'hey there';

}



4. Property Binding 




app.component.html


<!--use your message property here using property binding-->

<span [innerHTML]="message">hey there</span>


5. Event Binding 



app.component.html


Enter Your Name: 

  <input #userName type="text" value=''>

  <button #btn (click)=welcomeMe(userName.value)> Welcome Me </button>

<br>

<h2> Message from Event Binding</h2>

<h3 id="output">

<!--add your welcome message with name like `Welcome <name>`-->

Welcome {{ name }}

</h3>



app.component.ts


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


@Component({

  selector: 'app-root',

  templateUrl: './app.component.html' //// refer app.component.html for property binding

})

export class AppComponent {

  //Define your name and show variables here

  //Define your welcomeMe(username) method here

  name: string;

  welcomeMe(name : string){

    this.name = name;

  }

}


6. Two Way Data Binding:- 


app.component.html 


Enter Your Name: 

<input id="firstName" type="text" [(ngModel)]="name.first">

<input id="lastName" type="text" [(ngModel)]="name.last">

<br>

<h2>Message from Two way Binding</h2>

<h3 id="output">

<!--add welcome message here with first and last values of name-->

Welcome {{name.first}} {{name.last}}

</h3>


app.component.ts


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


@Component({

  selector: 'app-root',

  templateUrl: './app.component.html'

})

export class AppComponent {

  //Define your name object with first and last properties

  name = {

    first: "John",

    last: "Smith"

  };

}



**************************************************
Credit for the above notes, goes to the respective owners. 

If you have any queries, please feel free to ask on the comment section.
If you want MCQs and Hands-On solutions for any courses, Please feel free to ask on the comment section too.

Please share and support our page!

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !

Join Telegram Channel

Join MNCAnswers To Get Instant Updates

Join Telegram Channel