diff --git a/content/roadmaps/104-angular/content/104-templates/101-property-binding.md b/content/roadmaps/104-angular/content/104-templates/101-property-binding.md index 5f56ef452..6e9aa5b15 100644 --- a/content/roadmaps/104-angular/content/104-templates/101-property-binding.md +++ b/content/roadmaps/104-angular/content/104-templates/101-property-binding.md @@ -1 +1,7 @@ -# Property binding \ No newline at end of file +# Property binding + +Property binding helps you set values for properties of HTML elements or directives. To bind to an element's property, enclose it in square brackets `[]` which causes Angular to evaluate the right-hand side of the assignment as a dynamic expression. + +Free Content + +Angular Official Website diff --git a/content/roadmaps/104-angular/content/104-templates/102-template-statements.md b/content/roadmaps/104-angular/content/104-templates/102-template-statements.md index 53276f033..d28731e60 100644 --- a/content/roadmaps/104-angular/content/104-templates/102-template-statements.md +++ b/content/roadmaps/104-angular/content/104-templates/102-template-statements.md @@ -1 +1,7 @@ -# Template statements \ No newline at end of file +# Template statements + +Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms. Enclose the event in `()` which causes Angular to evaluate the right hand side of the assignment as one or more template statements chained together using semicolon `;`. + +Free Content + +Angular Official Website diff --git a/content/roadmaps/104-angular/content/104-templates/103-binding-data-props-attrs-events.md b/content/roadmaps/104-angular/content/104-templates/103-binding-data-props-attrs-events.md index 7edf96dec..0e7f1f7d0 100644 --- a/content/roadmaps/104-angular/content/104-templates/103-binding-data-props-attrs-events.md +++ b/content/roadmaps/104-angular/content/104-templates/103-binding-data-props-attrs-events.md @@ -1 +1,12 @@ -# Binding data props attrs events \ No newline at end of file +# Binding data props attrs events + +In an Angular template, a binding creates a live connection between view and the model and keeps them both in sync. + +- **property**: helps you set values for properties of HTML elements or directives. +- **attributes**: helps you set values for attributes of HTML elements directly. +- **event**: lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches. +- **data**: It's a combination of property and event binding and helps you share data between components. + +Free Content + +Angular Official Website diff --git a/content/roadmaps/104-angular/content/104-templates/104-reference-vars.md b/content/roadmaps/104-angular/content/104-templates/104-reference-vars.md index 54543ca7d..fba486787 100644 --- a/content/roadmaps/104-angular/content/104-templates/104-reference-vars.md +++ b/content/roadmaps/104-angular/content/104-templates/104-reference-vars.md @@ -1 +1,7 @@ -# Reference vars \ No newline at end of file +# Reference vars + +Template reference variables help you use data from one part of a template in another part of the template. A template variable can refer to a DOM element within a template, component or directive. In the template, use the hash symbol, `#`, to declare a template reference variable. + +Free Content + +Angular Official Website diff --git a/content/roadmaps/104-angular/content/104-templates/105-input-output.md b/content/roadmaps/104-angular/content/104-templates/105-input-output.md index 64006a139..fcb518cb5 100644 --- a/content/roadmaps/104-angular/content/104-templates/105-input-output.md +++ b/content/roadmaps/104-angular/content/104-templates/105-input-output.md @@ -1 +1,7 @@ -# Input output \ No newline at end of file +# Input output + +`@Input()` and `@Output()` give a child component a way to communicate with its parent component. `@Input()` lets a parent component update data in the child component. Conversely, `@Output()` lets the child send data to a parent component. + +Free Content + +Angular Official Website