Angular - Concepts

1. Selector:

In Angular, the selector is a property used to define how a component or directive is attached to the HTML view. The selector is specified inside the @Component or @Directive decorator and determines how the component or directive can be applied to the HTML DOM.


Types:

    It can be defined as an element, attribute, or class selector.

Element Selector:

        The component is used like a regular HTML element.

<app-root></app-root>


Attribute Selector:

        The directive or component is applied to an HTML element as an attribute.

<div app-root></div>


Class Selector:

        The directive or component is applied when a certain class is used on an element.

<div class="app-root"></div>


Multiple Selectors:

It’s possible to use multiple selectors to make a directive or component apply to different elements.

@Directive({ selector: '[appHighlight], div.appHighlight' })


@ViewChild:

@ViewChild is a decorator in Angular used to access DOM element, directive, or child component in the view of the current component. This allows you to interact with child elements directly from the parent component class.

Scenarios:

Manipulating DOM elements, like focusing on an input field.

Calling methods or accessing properties of child components.

Modifying behavior or properties of directives applied to elements.

Exampe:
child.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>Child component works!</p>`,
})
export class ChildComponent {
  message = "Hello from Child Component";
}


parent.component.ts:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';  // Import the child component

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="accessChild()">Access Child</button>
  `,
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  ngAfterViewInit() {
    console.log(this.childComponent.message);  // Access the child component's property
  }

  accessChild() {
    console.log(this.childComponent.message);  // Access child component's property again
  }
}


Explanation:
    @ViewChild(ChildComponent) is used to get a reference to the ChildComponent in the parent component.
    In ngAfterViewInit, we can safely access the child component because it has been initialized.
    The button in the parent component allows triggering the accessChild() method, which interacts with the child component's property message.


@ViewChildren:

@ViewChildren is a decorator in Angular that allows you to access multiple child elements, components, or directives in a parent component's view. It returns a QueryList, a dynamic list of references that updates automatically when children are added or removed. Typically accessed in the ngAfterViewInit lifecycle hook, it is commonly used to interact with multiple child components or elements, such as iterating over them or applying operations.

In summary, @ViewChildren enables the parent component to efficiently interact with multiple children.

Example:

child.component.ts

import { Component } from '@angular/core';

@Component({

  selector: 'app-child',

  template: `<p>Child component works!</p>`,

})

export class ChildComponent {

  message = "Hello from Child Component";

}



parent.component.ts
import { Component, QueryList, ViewChildren, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';  // Import the child component

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <app-child></app-child>
    <app-child></app-child>
    <button (click)="accessChildren()">Access Children</button>
  `,
})
export class ParentComponent implements AfterViewInit {
  @ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>;

  ngAfterViewInit() {
    this.childComponents.forEach((child) => {
      console.log(child.message);  // Access each child's message property
    });
  }

  accessChildren() {
    this.childComponents.forEach((child) => {
      console.log(child.message);  // Access each child's message property again
    });
  }
}

Explanation:

@ViewChildren(ChildComponent): Gets references to all instances of ChildComponent in the template, returning a live QueryList of child components.

QueryList: A dynamic collection that can be iterated to access each child component's properties.

ngAfterViewInit: Allows access to the child components after the view is initialized, ensuring the components are rendered first.

accessChildren method: Iterates over the QueryList and logs each child's message property when the button is clicked.




Comments

Post a Comment

Popular posts from this blog

Multiline to singleline IN C# - CODING

Multiline to singleline IN C# - CODING using System; using System.Linq; class Program {     static void Main(string[] args)     {         string input = @"This is                  multiline";                  // Split the input into lines, trim each line, and filter out empty lines         string result = string.Join(" ", input.Split(new[] { '\r', '\n' }, StringSplitOptions.RemoveEmptyEntries)                                                .Select(line => line.Trim()));         Console.WriteLine(result);     } } Output: This is  multiline
Read more

EF Core interview questions for beginners

1. What is Entity Framework Core (EF Core)? EF Core is an open-source Object-Relational Mapper (ORM) that enables .NET developers to work with databases using .NET objects. It allows you to interact with a database using strongly typed classes and LINQ queries, rather than writing raw SQL queries. EF Core supports various database providers, such as SQL Server, SQLite, PostgreSQL, MySQL, and more. 2. What are the advantages of using EF Core over traditional ADO.NET? Productivity:  EF Core allows you to work with databases using high-level objects, reducing the amount of boilerplate code you need to write. Cross-platform:  EF Core supports multiple databases and works on Windows, Linux, and macOS. LINQ Support:  You can query the database using LINQ, which is more type-safe and easier to maintain than raw SQL queries. Code-First & Database-First:  EF Core supports both approaches to model databases. Change Tra...
Read more

EF Core interview questions for experienced

EF Core interview questions for experienced 1. What are the main differences between Entity Framework (EF) and Entity Framework Core (EF Core)? EF Core is a complete rewrite of EF. Unlike EF, EF Core supports cross-platform development, improved performance, LINQ query translation, and has a more modular architecture. EF Core does not support all features that EF 6 does (like lazy loading and some database providers). 2. How does EF Core handle migrations, and what are some common pitfalls? EF Core uses migrations to update the database schema based on model changes. Common pitfalls include not applying migrations correctly, misalignment between model and database state, or missing/overwriting migrations during collaboration in a team environment. 3. Explain the difference between Add and Attach methods in EF Core. Add method is used to add a new entity to the context and mark it as Added , while Attach attaches an existing entity to the context with no changes. The Attach meth...
Read more