Angular 2 Building Blocks Hacker rank Hands-On Solutions

 Angular 2 Building Blocks Hands-On Solutions

These Hands-On Solutions are only for educational purposes. Angular is a very popular technology used for Single Page Application design. Learn basics and complete the Hands-On Solutions. If you are stuck please use the below 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"

  };

}