Angular Form

 There are two approach for form:
1. Template Driven form and 
2. Reactive Form


1.Template driven form :
In template driven form there are key components  like:
ngForm -> Tracks the whole form
ngModel-> Binds input values
Template reference variable(#name="ngModel")-> Access control state
Validation-> by HTML attributes (required, email etc)

Comments

Post a Comment

Popular posts from this blog

Angular Guides Notes

Image
 Angular  Angular is framework that is developed and maintained by google.It is  powerful, full-featured framework for building large-scale, structured frontend applications , especially useful in enterprise-level projects. Core Foundation  a.Components b.Services c.Data Binding d.Templates e.Routes g.Life Cycle Hooks a.Component A component is the fundamental building block of every Angular UI. Each one owns a slice of the screen and is defined by three things working together: a TypeScript class (the logic), an HTML template (the view), and CSS styles (the appearance). The decorator @Component wires them together and tells Angular where to render the component via its selector . Components communicate with each other through @Input() (data flowing in from a parent) and @Output() with EventEmitter (events flowing out to a parent). This creates a clear, predictable data flow through the component tree. Here's how the structure looks: In code: Directives: Directi...
Read more

SIGNALS

Signals: Signals is a system that tracks your states throughoout an application, allowing the framework to optimize rendering updates. It is either Writable or read-only. Writable Signals: It provide an API for updating their values directly.we can create an writable signals by calling the signal function with the signals initial value: const count =signal(0); console.log('The count is :'+count()); to change the value we use .set() or .update() count.set(3) or  count.update((value)=> value +1);
Read more

Directives

Directives Directives are classes that add additional behavior to elements in your Angular applications. There are three types of directives provided by angular: 1.Attribute Directives 2.Component Directives 3. Structural Directives 1.Attribute Directives: It is an directives which enables us to change   the appearance or behavior of DOM elements and Angular components with attribute directives. CLI for Directives  : ng  generate  directive  highlight eg: import {Directive, ElementRef, inject} from '@angular/core'; @Directive({      selector: '[appHighlight]', }) export class HighlightDirective {      private el = inject(ElementRef);     constructor() {                this.el.nativeElement.style.backgroundColor = 'yellow';                }    } where  The   @Directive()  decorator's configuration pro...
Read more