One of the main goals of Angular is to help the developer create reusable and composable components. I think ng-content is one of the simplest ways to do that once you understand how it works.
Dynamic content. That is the simplest way to explain what ng-content provides. You use the <ng-content></ng-content> tag as a placeholder for that dynamic content, then when the template is parsed Angular will replace that placeholder tag with your content. Think of it like curly brace interpolation, but on a bigger scale. The technical term for this is “content projection” because you are projecting content from the parent component into the designated child component. If you understand {{myValue}}, then you understand the basics of what ng-content does. The difference is where that value comes from. With normal curly brace interpolation the value comes from the component. With ng-content the value comes from the component in its execution context.
Let’s say you want to create a reusable button in your app.
Here we can see a generic add button which triggers an event when clicked. Nothing crazy here. The main thing I want to point out is the button’s text. “Add New Item” is hard-coded in the template. But, what if we wanted to get more specific with our button text? For example, “Add Coffee”. We could put that value in the component like this:
Or even as an Input from the parent component like this:
These ways work but this is where ng-content shines. Take a look at this:
See what’s happening here?
In the template for the reusable add button component we use the tag as our placeholder for the button text. This is telling Angular, “Hey, I don’t know what this is supposed to be right now but, I promise to tell you later”.
Then when the button component is actually being used… BAM! We put whatever text we want inside the component
Dynamic text is just the tip of the metaphorical iceberg though. You can put lots of different things inside the component. Including HTML tags and even other components.
The model in an MVC-based application is generally responsible for modeling the data used in the view and handling user interactions such as clicking on buttons, scrolling, or causing other changes in the view.
Angular NgModel is an inbuilt directive that creates a FormControl instance from the domain model and binds it to a form control element. The ngmodel directive binds the value of HTML controls (input, select, textarea) to application data.
The FormControl instance tracks the value, user interaction, and validation status of the control and keeps the view synced with the model. If used within a parent form, the directive also registers itself with the form as a child control.
This directive is used by itself or as part of a larger form. Use the ngModel selector to activate it.
Difference between [(ngModel)] and [ngModel] for binding state to property?
Angular2+ data flow:
In Angular the data can flow between the model (component class ts.file) and view (html of the component) in the following manners:
- From the model to the view.
- From the view to the model.
- Data flows in both directions, also known as 2 way data binding.
Syntax:
model to view:
<input type="text" [ngModel]="overRideRate">
This syntax is also known as property binding. Now if the overRideRate property of the input field changes the view automatically will get updated. However if the view updates when the user enters a number the overRideRate property will not be updated.
view to model:
(input)="change($event)" // calling a method called change from the component class
(input)="overRideRate=$event.target.value" // on input save the new value in the title property
What happens here is that an event is triggered (in this case input event, but could be any event). We then can call methods of the component class or directly save the property in a class property.
2-way data binding:
The following syntax is used for 2-way data binding. It is basically a syntactic sugar for both:
- Binding model to view.
- Binding view to model
<input [(ngModel)]=”overRideRate” type=”text” >
Now something changes inside our class this will reflect our view (model to view), and whenever the user changes the input the model will be updated (view to model).
So in a single statement –
[ngModel] evaluates the code and generates an output (without two-way binding).
[(ngModel)] evaluates the code and generates an output and also enables two-way binding.
A regular example from actual use-cases
<ng-select
[items]="dropdownOptions"
bindLabel="displayValue"
[(ngModel)]="ngSelectSelectedItem"
>
</ng-select>
As a background, by default ng-select binds to default label property for display, and keeps whole object as selected value
Difference between [(ngModel)] and [ngModel] for binding state to property?
Here is a template example:
<input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate">
<input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate">
[(ngModel)]="overRideRate" is the short form of
[ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"
[ngModel]="overRideRate"is to bindoverRideRateto theinput.value(ngModelChange)="overRideRate = $event"is to updateoverRideRatewith the value ofinput.valuewhen thechangeevent was emitted.
Together they are what Angular2 provides for two-way binding.
Another explanation
[ngModel]="currentHero.name" is the syntax for one-way binding, while,
[(ngModel)]="currentHero.name" is for two-way binding, and the syntax is compound from:
[ngModel]="currentHero.name" and (ngModelChange)="currentHero.name = $event"
If you only need to pass model, use the first one. If your model needs to listen change events (e.g. when input field value changes), use the second one.
Further Reading
wtf-is-ng-content-8382b2a664e1 https://blog.angular-university.io/angular-ng-content/
