SHARE

Yo gang, in this Angular 2 tutorial, we’ll take a look at custom property bindings and how they can help us pass data from one components into another. To do this we’ll also have to use the @Input decorator too.

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/angular-2-playlist
+ Atom editor – https://atom.io/
+ Download Node.js – https://nodejs.org/en/

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== PSD to WordPress Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W

============ Node.js for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

25 COMMENTS

  1. app.component.ts

    parentNinja = {
    name: 'Ryu',
    belt: 'Red'
    }

    app.component.html
    <app-home [childNinja]="parentNinja"></app-home>

    home.component.ts
    don't forget to import -> import { Component, Input } from '@angular/core';

    @Input() childNinja: string; //not sure if is mandatory to declare string or obj here….

    home.component.html
    <p>{{childNinja.name}}</p>
    <p>{{childNinja.belt}}</p>

  2. Thank you very much for this video. I was following a course, that went over this topic a bit too fast. I found this video, and it made things crystal clear. Keep up the good work.

  3. For those who are stuck on @Input while watching the video,
    Keep watching the video he made a mistake and he has fixed it 🙂
    @input() ninja;

  4. I am using Angular 4 and it didn't work.
    I already solved the problem.
    I changed:

    @Input ninja;

    and put "()" after "@Input":

    @Input() ninja;

    And it worked.

  5. Hello everyone,

    Updates by ANg2 team is very annoying but still keep up the hope.
    To use this input according to the latest version

    add it to the home.ts in like this>
    @Component({
    inputs: ["ninja"],
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
    })

    It will work. Let me know!

  6. Hi Shaun, I understand you put a lot of effort to make this awesome tutorial series and you always do. No doubt we all love your tutorials, but I believe this Angular 2 tutorials needs to be updated because so many things have changed and doesn't exactly work the way shown in the tutorials. Just a thought….

  7. Logic is the same but you have to put inputs field into component decorator like this:
    @Component({
    inputs: ["ninja"],
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
    })

  8. I am so tired of the endless changes by the angular team. Its so hard to learn when everything changes all the time and what you have learned doesnt work a month later.

  9. Thanks for this course and this video, I have a problem getting the value of @Input at the class of the componente always returns undefined:

    // This component I use inside other component
    <main-menu name = "white"></main-menu>

    // componente.ts of <main-menu>
    import { Component , Input } from '@angular/core';

    @Component({
    selector: 'main-menu',
    templateUrl:'app/menu/menu.component.html'
    })

    export class MenuComponent {
    @Input() name: any;
    console.log(this.name); // Undefined
    }

  10. For some reason this does not work for me, view is not rendered. Everything until now is working. This technique does not work.

LEAVE A REPLY

Please enter your comment!
Please enter your name here