Forms in Angular 8 are used to handle the user’s input, enable users to log in, update profile, enter information, and to perform different data-entry tasks. To handle the user’s input through forms, there are 2 approaches in Angular 8: Reactive forms Template-driven forms Reactive Forms vs. Template-driven Forms: For the collection of the user’s … Read more
Any change in the template (view) in one-way data binding was not reflected in the component. The two-way binding, however, facilitates to update data from component to view and from view to the component. The automatic synchronization of data happens in Two Way Data Binding between the Model and the View. It means that changes … Read more
To handle the events raised from the DOM like button click, mouse movement, etc event binding is used in Angular 8. The specified method is called by event binding in the component when the DOM event happens (eg. click, change, keyup). The cookBacon() method in this example is called from the component when the button … Read more
Being the core concept of Angular 8, data binding makes it easy to define interactive applications without worrying about pushing and pulling data, by defining the communication between a component and the DOM. The data binding can be understood as a communication between the typescript code of a component and the template that the user … Read more
Being a one-way data-binding technique String Interpolation is used to output the data from a TypeScript code to an HTML template (view). To display the data from the component to the view, the template expressions are used by the String Interpolation in double curly braces. The value of a property is added by the String … Read more
Property Binding is also a one-way data-binding technique. It, however, binds a property of a DOM element to a field which is a defined property in the component TypeScript code. The string interpolation is internally converted into property binding by Angular. Example: <img [src]=”imgUrl” /> Property binding has an advantage of shorter and cleaner code … Read more
The ngSwitch in Angular 8 is a structural directive that is similar to the switch statement of C#. Being used to Add/Remove DOM Element, this directive is applied to the container element with a switch expression. Syntax of Angular 8 ngSwitch Directive: <container_element [ngSwitch]="switch_expression"> <inner_element *ngSwitchCase="match_expresson_1">…</inner_element> <inner_element *ngSwitchCase="match_expresson_2">…</inner_element> <inner_element *ngSwitchCase="match_expresson_3">…</inner_element> <inner_element *ngSwitchDefault>…</element> </container_element><container_element [ngSwitch]="switch_expression"> <inner_element … Read more
To repeat a section of an HTML template once per each item from an iterable list or a Collection, the *ngFor directive is used. Along with being an Angular structural directive, the *ngFor directive is also similar to NngRepeat in AngularJS. The *ngFor directive exports some local variables like Index, First, Last, odd and even. … Read more
To add or remove HTML Elements according to the expression, such that the expression returns a Boolean value, the ngIf Directive is used. The element is inserted if the expression is true or else it removes the element. The ngIf Directive of Angular 8 is similar to the ng-if directive of AngularJS. Syntax 1: <p … Read more
To modify the DOM, in order to change the appearance, behavior or layout of a DOM element, the Angular 8 directives are used. The Angular 8 directives help to extend HTML too. Directives in Angular 8 are of 3 types based on their behavior. Component Directives Structural Directives Attribute Directives Component Directives: Being used in … Read more