Update content for templates in angular (#2328)

* Update 101-property-binding.md

* Update 102-template-statements.md

* Update 103-binding-data-props-attrs-events.md

* Update 104-reference-vars.md

* Update 105-input-output.md

content/roadmaps/104-angular/content/104-templates/101-property-binding.md

@@ -1 +1,7 @@
-# Property binding
+# 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.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/property-binding'>Angular Official Website</BadgeLink>

content/roadmaps/104-angular/content/104-templates/102-template-statements.md

@@ -1 +1,7 @@
-# Template statements
+# 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 `;`.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-statements'>Angular Official Website</BadgeLink>

content/roadmaps/104-angular/content/104-templates/103-binding-data-props-attrs-events.md

@@ -1 +1,12 @@
-# Binding data props attrs events
+# 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.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/binding-overview'>Angular Official Website</BadgeLink>

content/roadmaps/104-angular/content/104-templates/104-reference-vars.md

@@ -1 +1,7 @@
-# Reference vars
+# 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.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-reference-variables'>Angular Official Website</BadgeLink>

content/roadmaps/104-angular/content/104-templates/105-input-output.md

@@ -1 +1,7 @@
-# Input output
+# 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.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/inputs-outputs'>Angular Official Website</BadgeLink>