Hello, {{ username }}!
+ ` +}) +export class AppComponent { + username = ''; +} +``` + +**Under the hood**, `[(ngModel)]` is shorthand for: + +```html + +``` + +**Comparison of binding types:** + +| Type | Syntax | Direction | +|------|--------|-----------| +| Interpolation | `{{ value }}` | Class → Template | +| Property binding | `[property]="expr"` | Class → Template | +| Event binding | `(event)="handler()"` | Template → Class | +| Two-way binding | `[(ngModel)]="prop"` | Both directions | + +Hello {{ name }}
` +}) +export class HelloComponent { + name = 'Angular'; +} +``` + +ng test --watch=false --code-coverage| Generate Code Coverage Reports | |npm run | Runs an Architect target with an optional custom builder configuration defined in project. | |ng build --aot | generally when we serve angular project all the angular files are downloaded on browser and it will compile and execute the application on the browser but in aot entire application delivered to the browser is precompiled hence improves the performance. | |ng add @angular/pwa |Adds support for an external library to project | -|ng xi18n --output-path src/locale |Internationalization | |ng generate web-worker app |Add a Web Worker to angular app|
Birthday is {{ birthday | date:'dd/mm/yyyy'}}
` // 18/06/2002 -}) -export class BirthdayComponent { - birthday = new Date(2002, 6, 18); -} + selector: 'app-user-list', + template: ` +Card content goes here...
+Birthday is {{ birthday | date:'dd/mm/yyyy'}}
` // 18/06/2002 +}) +export class BirthdayComponent { + birthday = new Date(2002, 6, 18); +} ``` *Note: The parameter value can be any valid template expression, such as a string literal or a component property.* @@ -2109,19 +2538,6 @@ The commonly-needed services, pipes, and directives provided by `@angular/common ↥ back to top -## Q. What is codelyzer? - -Codelyzer provides set of tslint rules for static code analysis of Angular TypeScript projects. ou can run the static code analyzer over web apps, NativeScript, Ionic etc. Angular CLI has support for this and it can be use as below, - -```js -ng new codelyzer -ng lint -``` - -{{ message }}
` }) +export class ExampleComponent implements OnInit, OnChanges, OnDestroy { + @Input() data: string; + private subscription: Subscription; + + ngOnChanges(changes: SimpleChanges) { + if (changes['data']) { + console.log('Changed:', changes['data'].previousValue, '→', changes['data'].currentValue); + } + } + + ngOnInit() { + this.subscription = someObservable$.subscribe(); + } + + ngOnDestroy() { + this.subscription.unsubscribe(); // Always clean up + } +} +``` + +{{ userInput }}
+``` + +**2. Property binding sanitization** — Angular sanitizes `[innerHTML]`, `[src]`, `[href]`, and `[style]`: + +```html + +``` + +**3. `DomSanitizer` for explicitly trusted content:** + +```typescript +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; + +@Component({ template: `` }) +export class MyComponent { + trustedHtml: SafeHtml; + + constructor(private sanitizer: DomSanitizer) { + // ONLY use when you are 100% certain the content is safe + this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml('Safe content'); + } +} +``` + +**Security contexts Angular enforces:** HTML, Style, URL, Resource URL, Script. + +**Best practices:** +- Never use `bypassSecurityTrust*` with user-controlled data +- Always validate and sanitize input on the server side +- Avoid direct DOM manipulation via `nativeElement`; use `Renderer2` instead +- Keep Angular and all dependencies updated + +