Scribd
Upload
64 views1 page

Angular Data Binding and Selectors Guide

Selectors can be used to target elements, attributes, and styles in a document. Data binding in Angular allows for communication between HTML and TypeScript code using string interpolation, property binding, and event binding. Combining property and event binding enables two-way data binding using ngModel. To use two-way binding, the FormsModule must be imported in the AppModule file. Directives are instructions to the DOM, and @Input and @Output decorators are used to pass data between parent and child components via an EventEmitter.

Uploaded by

jafufar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
64 views1 page

Angular Data Binding and Selectors Guide

Selectors can be used to target elements, attributes, and styles in a document. Data binding in Angular allows for communication between HTML and TypeScript code using string interpolation, property binding, and event binding. Combining property and event binding enables two-way data binding using ngModel. To use two-way binding, the FormsModule must be imported in the AppModule file. Directives are instructions to the DOM, and @Input and @Output decorators are used to pass data between parent and child components via an EventEmitter.

Uploaded by

jafufar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

selectors can be called as

elements <app-servers> ---> defined as selector:'app-servers'


attributes <div app-servers> --> defined as selector:[app-servers]
styles <div class='app-servers> --> defined as selector:'.app-server'

Data Binding --> communication between html and typescript file


we use to output data --> string Interpolation {{data}}
--> property binding { [property] = "data" }
react to user --> Event Binding ((event) = "expression)

Combination of both is called two way data binding. --> ([(ngModel)] = "data")

For two way data binding to work, we need to enable ngModel directive. this is done
by adding FormsModule to the imports[] array in the app module.

we also need to add forms importing odule in [Link] file.

Directives:
Directives are instructions to the dom

@input() --> input decorator ( used to pass data from parent to child component)
@output() --> output decorator ( used to pass data from child to parent component)
these decorators are used to pass the data between the components.
event emiter helps to call the parent function from the child element

You might also like