Angular Tutorial: Selectors 🎯

Welcome to the latest lesson in our Angular Tutorial series! Today, we're diving into Selectors.

Selectors are a fundamental part of Angular, allowing us to work with HTML templates and their corresponding components. They help in binding our UI (User Interface) with the component logic. Let's get started!

Understanding Selectors 📝

In simple terms, Selectors are special attributes we add to our HTML templates to link them with Angular components. They help Angular understand which template belongs to which component.

Syntax 💡

A selector in Angular consists of two parts:

selector: This is the attribute we add to our HTML template.
template: This is the HTML template corresponding to the component.

Here's a basic example:

html

<!-- App.component.html -->
<app-my-component></app-my-component>

typescript

// MyComponent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <h1>Hello, World!</h1>
  `
})
export class MyComponentComponent { }

In the example above, app-my-component is the selector for our MyComponentComponent.

Using Selectors in Templates 💡

Now that we understand what selectors are, let's see how to use them in our templates.

Component Data Binding 💡

We can use selectors to bind data from our component to the template.

html

<!-- App.component.html -->
<app-my-component [title]="myTitle"></app-my-component>

typescript

// AppComponent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-my-component [title]="myTitle"></app-my-component>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myTitle = 'Hello, Angular!';
}

In the example above, we're passing the myTitle variable from our AppComponent to the MyComponent.

Component Event Binding 💡

We can also use selectors to bind events from our template to our component.

html

<!-- App.component.html -->
<button (click)="onButtonClick()">Click me!</button>

typescript

// AppComponent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onButtonClick()">Click me!</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onButtonClick() {
    console.log('Button clicked!');
  }
}

In the example above, we're binding the click event of a button to our component's onButtonClick method.

Advanced Selectors 💡

Angular provides some advanced features for selectors, such as structure, attribute, and class selectors.

Structure Selectors 💡

Structure selectors allow us to select parent-child relationships in our templates.

html

<!-- app.component.html -->
<app-parent>
  <app-child></app-child>
</app-parent>

typescript

// ParentComponent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <ng-container *ngFor="let child of children">
      {{ child }}
    </ng-container>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  children = ['Child 1', 'Child 2', 'Child 3'];
}

// ChildComponent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <div>I am a child!</div>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent { }

In the example above, we're using the *ngFor directive to loop through our children in the ParentComponent.

Attribute and Class Selectors 💡

Attribute and class selectors allow us to select elements based on their attributes or classes.

html

<!-- app.component.html -->
<div my-attribute="Hello, World!">Hello, Template!</div>
<div class="my-class">Hello, Template!</div>

typescript

// MyAttributeComponent.component.ts
import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[my-attribute]'
})
export class MyAttributeDirective {
  @Input('myAttribute') value: string;

  constructor() {}

  ngDoCheck() {
    console.log(this.value);
  }
}

// MyClassComponent.component.ts
import { Component, HostBinding } from '@angular/core';

@Component({
  selector: '.my-class',
  template: `
    <div>I am a class component!</div>
  `,
  styleUrls: ['./class.component.css']
})
export class MyClassComponent {
  @HostBinding('class') classList = ['my-class'];

  constructor() {}
}

In the example above, we're using a directive to select elements with the my-attribute attribute and a class component to select elements with the my-class class.

Quiz 📝

Question: What is the purpose of a selector in Angular?

A: To link HTML templates with Angular components B: To bind data from our component to the template C: To bind events from our template to our component

Correct: A

Explanation: A selector in Angular helps in binding our UI with the component logic. It tells Angular which template belongs to which component.