Better concepts, less code in Angular 2 - Victor Savkin and Tobias Bosch
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about ng-content, ContentChild and ViewChild, since it shows content projection and directive queries with a worked example.
Recommended by 2 people across 2 different months, 2015 to 2016.
What it is
A 23-minute AngularConnect 2015 conference talk by Victor Savkin and Tobias Bosch of the Angular team. They build a complex widget in Angular 2 to show content projection, querying for directives and asynchronous control flow.
What people said
Strong rec mithun_daa · 2016-02 · Stack Overflow · on “What's the difference between @ViewChild and @ContentChild?”
This video from Angular Connect has excellent info about ViewChildren, ViewChild, ContentChildren and ContentChild [this video] @Component({ template: ` <my-widget> <comp-a/> </my-widget> ` }) class App {} @Component({ selector: 'my-widget', template: `<comp-b/>` }) class MyWidget {} From my-widget 's perspective, comp-a is the ContentChild and comp-b is the ViewChild . CompomentChildren and ViewChildren return an iterable while the xChild return a single instance.
Recommends Mark Rajcok · 2015-12 · Stack Overflow · on “Angular 2: Accessing injected dependencies from decorator”
Regarding the component user being able to specify the template, ngContent or might be what you are looking for. See the AC 2015 video by Bosch and Savkin: [this video]
Cites Chandermani · 2015-10 · Stack Overflow · on “Import One component in another component using ng-content”
ng-content can take an attribute select which is a css selector of the element to include\select. So this should work (i have not tried) <div class="custom5"> <ng-content select="joint-button'[btnname=Edit]'"></ng-content> </div> <div class="custom6"> <ng-content select="joint-button'[btnname=Delete]'"></ng-content> </div> Recently this was demo'ed in AngularConnect, see this video [this video]
Cites Mark Rajcok · 2016-01 · Stack Overflow · on “How to watch for form changes in Angular”
If you are using FormBuilder , see @dfsq's answer. If you are not using FormBuilder , there are two ways to be notified of changes. Method 1 As discussed in the comments on the question, use an event binding [LINK] on each input element. Add to your template: <input type="text" class="form-control" required [ngModel]="model.first_name" (ngModelChange)="doSomething($event)"> Then in your component: doSomething(newValue) { model.first_name = newValue; console.log(newValue) } The Forms [LINK] page has some additional information about ngModel that is relevant here: The ngModelChange is not an <input> element event. It is actually an event property of the NgModel directive. When Angular sees a b