> Angular 2 Building Blocks Hacker rank Hands-On Solutions - TECH UPDATE

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"

  };

}





Angular 2 Building Blocks Hacker rank Hands-On Solutions Angular 2 Building Blocks Hacker rank Hands-On Solutions Reviewed by TECH UPDATE on January 10, 2022 Rating: 5

47 comments:

  1. Thank you for this, this is of great help, could you also please upload the handson code for "Directives in Angular" which is part of the same course?. That is the only handson seems to be missing here

    ReplyDelete
    Replies
    1. Did u got directives code???

      Delete
    2. Did u got directives answer

      Delete
    3. Hi buddy thanks for this great help only I need is Directives in Angular 2 if u have please do let me know

      Delete
    4. We Need Directives Answer

      Delete
    5. please share directive code

      Delete
    6. I need help in directives in angular

      Delete
    7. https://nitintyagi045.blogspot.com/2022/06/component-from-angularcore-component.html

      Delete
  2. See answers for using directives handson at -

    https://embed.plnkr.co/or14Wh/

    ReplyDelete
    Replies
    1. This is not working,thereis no display button

      Delete
    2. it is showing test case failed

      Delete
    3. This is not working. Only 2 test cases passed

      Delete
    4. It Passed,Thanks

      Delete
    5. hi there is no submit butten in the code

      Delete
  3. Hi I'm always getting npm error in event binding . please help me .

    ReplyDelete
  4. Please share using directives answer

    ReplyDelete
  5. Hii please help me in angular directive handson

    ReplyDelete
  6. Please provide directives angular2 hands on fresco play

    ReplyDelete
  7. Everything is perfect first of all thank you for guiding us. but here Directives handson is missing.

    ReplyDelete
  8. anyone please share answers for directives

    ReplyDelete
  9. Please anyone provide Angular2 -Newsapplication hands-on solution

    ReplyDelete
    Replies
    1. news application solution?

      Delete
    2. yes please share me this its very argent

      Delete
  10. Please upload angular2 mini project course id-64449.

    ReplyDelete
  11. Anyone having angular 2 news application and Typescript hands on solutions pls share

    ReplyDelete
  12. Please share hands on of directives

    ReplyDelete
  13. Please provide angular 2 news application.

    ReplyDelete
  14. post angular 9 frescoplay

    ReplyDelete
  15. Please help us with directive answer

    ReplyDelete
  16. Hi.. please provide answer for "using directives ”” hands on

    ReplyDelete
  17. i want web user interface design techniques hands on solution

    ReplyDelete
  18. web ui design techniques hands on solution

    ReplyDelete
  19. Bro pls upload using directives handson

    ReplyDelete
  20. kindly upload directive handson solution

    ReplyDelete
  21. Upload using directive hands-on

    ReplyDelete
  22. bro please upload using directives

    ReplyDelete
  23. Please provide answer for using directives also

    ReplyDelete
  24. Share angular2 using directives hand on

    ReplyDelete
  25. Directive Hands-on


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



    @Component({

    selector: 'app-root',

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

    })

    export class AppComponent {



    constructor(){

    this.selectedDay=0

    }

    show:boolean;

    message:string;

    selectedDay:number

    selectedValue:string

    days=[

    { 'today':'Monday','msg':'Marvelous Mondays!'},

    { 'today':'Tuesday','msg':'Thrilling Tuesdays!'},

    { 'today':'Wednesday','msg':'Wonderful Wednesdays!'},

    { 'today':'Thursday','msg':'Trendy Thursdays!'},

    { 'today':'Friday','msg':'Fantastic Fridays!'},

    { 'today':'Saturday','msg':'Super Saturdays!'},

    { 'today':'Sunday','msg':'Sunny Sundays!'}

    ]

    //Define your variables show,message,selectedDay,selectedValue,days

    //Define your constructor here with selectedDay as 0





    }

    ReplyDelete
  26. Hi team,can you please share hands on for angular springboot stack(64904)

    ReplyDelete
  27. Any one who is looking for Directives handson solution please refer https://nitintyagi045.blogspot.com/2022/06/component-from-angularcore-component.html

    ReplyDelete
  28. Anyone having angular 2 news application and Typescript hands on solutions pls share

    ReplyDelete
  29. Anyone having angular 2 news application and Typescript hands on solutions pls share

    ReplyDelete

Powered by Blogger.