Angular 2 Building Blocks Hands-On Solution | TCS Fresco Play
.webp "Angular 2 Building Blocks Hands-On Solution | TCS Fresco Play")
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
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!
2 comments