Angular komponentlari

Componentlar Angular ilovalarning qurilish bloklari hisoblanadi. Har bir component ko‘rinishni (uning shablonini) boshqaradi.

Asosiy componentlar

componentlar bilan qayta foydalanish mumkin bo‘lgan UI bloklarini yarating.
@Component selektor, shablon, uslublar va mantiqni bir-biriga bog‘laydi; shablonlarda selektordan (masalan, <hello-comp> ) foydalaning.
Ota-onalar bilan @Input() va @Output() orqali muloqot qiling.
<ng-content> bilan asosiy tarkibni loyihalash.

@Component({ selector: 'hello-comp' })
<hello-comp></hello-comp>

Eslatma: Tegishli: Ma’lumotlarni bog‘lash, hodisalar, andozalar. Talab bo‘yicha foydalanuvchi interfeyslari uchun Dinamik komponentlarga qarang (createComponent(), *ngComponentOutlet).

Komponentning anatomiyasi

Selektor: shablonlarga joylashtirgan teg (masalan, <app-root> ).
Shablon va uslublar: ichki yoki tashqi fayllar.
Mustakil: standalone: true va import bog‘liqliklarini imports da o‘rnating.

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

@Component({
  selector: 'hello-comp',
  standalone: true,
  imports: [],
  styles: [`:host { display: block; }`],
  template: `<p>Hello!</p>`
})
export class HelloComponent {}

component kiritish

@Input() yordamida ma’lumotlarni ota-onadan bolaga o‘tkazish.
[prop] (masalan, [name]="parentValue" ) bilan asosiy shablondan bog‘lang.
One-way flow: parent → child.
Bashorat qilinadigan andozalar uchun standart va aniq turlarni taqdim eting.

@Input() name: string;
<hello-comp [name]="parentValue"></hello-comp>

Misol

@Input() yordamida ota-onadan bolaga ma’lumotlarni uzating va [prop] bilan bog‘lang:

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello-comp',
  standalone: true,
  template: `<p>Hello {{ name }} from child!</p>`
})
export class HelloComponent {
  @Input() name = '';
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HelloComponent],
  template: `
    <h3>Parent Component</h3>
    <hello-comp [name]="user"></hello-comp>
  `
})
export class App {
  user = 'Angular';
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

@Input() name : Bola komponentida kirish xususiyatini e’lon qiladi.
[name]="user": Ota-onaning foydalanuvchi qiymatini bolaning ismi kiritilishiga bog‘laydi.
Bir tomonlama oqim: Ma’lumotlar oqimi parent → child . Ota-ona holatini yangilash uchun bolaning chiqishini chiqaring.

Eslatmalar:

Input names matter: Shablon xususiyat nomi bilan bog‘lanadi (yoki taqdim qilsangiz, taxallus).
Don't mutate inputs: Bolalarda mutatsiyaga uchragan kiritish obyektlaridan saqlaning; hodisani chiqaring va ota-onaga yangilashga ruxsat bering.

component natijasi

@Output() yordamida voqealar haqida ota-onaga xabar bering.
EventEmitter<T> orqali chiqarish; ota-ona (event)="handler($event)" bilan tinglaydi.
Oddiy va aniq tiplangan ma’lumotlarni (payload) yuboring.

@Output() saved = new EventEmitter<number>();
<child-comp (saved)="onSaved($event)"></child-comp>

Misol

@Output() yordamida boladan voqealarni chiqaring va ota-onani tinglang:

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'counter-button',
  standalone: true,
  template: `
    <button (click)="inc()">Clicked {{ count }} times</button>
  `
})
export class CounterButton {
  @Input() step = 1;
  @Output()
  /** @type {import('@angular/core').EventEmitter<number>} */
  clicked = new EventEmitter();
  count = 0;
  inc() {
    this.count += this.step;
    this.clicked.emit(this.count);
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CounterButton],
  template: `
    <h3>Component Output</h3>
    <counter-button [step]="2" (clicked)="onChildClicked($event)"></counter-button>
    <p>Parent received: {{ lastCount }}</p>
  `
})
export class App {
  lastCount = 0;
  /** @param {number} n */
  onChildClicked(n) {
    this.lastCount = n;
  }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

@Output() clicked = new EventEmitter<number>() : Ota-onaga raqam chiqaradigan chiqishni e’lon qiladi.
(clicked)="onChildClicked($event)": Ota-ona bosilgan hodisani tinglaydi; $event chiqarilgan raqamni olib yuradi.
count/step : Bola count ni step ga oshiradi va yangilangan jami chiqaradi.

Eslatma: Harakatlarni bildirish uchun chiqishlardan foydalaning; xizmatlarda ma’lumotlarni olish va boshqa nojo‘ya ta’sirlarni saqlang.

Kontent proyeksiyasi

Ota-ona tomonidan taqdim etilgan kontentni pastki component ichida ko‘rsatish.
Qo‘shish nuqtalarini <ng-content> bilan belgilang.
Muayyan slotlarni (masalan, title yoki body) belgilash uchun select’dan foydalaning.

<ng-content></ng-content>
<ng-content select="[card-title]"></ng-content>

Misol

Asosiy tarkibni <ng-content> slotlari bo‘lgan bola komponentiga loyihalash:

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'w3-card',
  standalone: true,
  styles: [`
    .card { border: 1px solid #ccc; border-radius: 8px; padding: 12px; max-width: 360px; }
    .card-header { font-weight: 600; margin-bottom: 6px; }
    .card-body { color: #333; }
  `],
  template: `
    <div class="card">
      <div class="card-header"><ng-content select="[card-title]"></ng-content></div>
      <div class="card-body"><ng-content></ng-content></div>
    </div>
  `
})
export class CardComponent {}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardComponent],
  template: `
    <h3>Content Projection (ng-content)</h3>

    <w3-card>
      <span card-title>Welcome</span>
      <p>Project any markup into a reusable shell component.</p>
    </w3-card>

    <br>

    <w3-card>
      <span card-title>Another Card</span>
      <ul>
        <li>Works with lists</li>
        <li>Images, buttons, etc.</li>
      </ul>
    </w3-card>
  `
})
export class App {}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

<ng-content> : Asosiy tarkibni bola komponenti shabloniga loyihalashtiradi.
select="[card-title]" : Nomlangan slotni belgilaydi; u yerda faqat card-title atributli elementlar proyeksiyalanadi.
Birlamchi slot: Noma’lum <ng-content> qolgan barcha prognoz qilingan kontentni ko‘rsatadi.

Eslatma: <ng-content select> bilan proyeksiyalash joylarini belgilang va hujjatlang, shunda iste’molchilar nima o‘tishini bilishadi.

Lifecycle (hayotiy sikl) hook’lari

Initializatsiya: ngOnInit-dan ulanishlarni hal qilish uchun sozlash uchun foydalaning.
Yiqilish: Taymerlarni/obunalarni tozalash uchun ngOnDestroy-dan foydalaning.
Boshqa hook’lar ngOnChanges, ngAfterViewInit va boshqalarni o‘z ichiga oladi.

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({ selector: 'demo', standalone: true, template: `<p>Lifecycle</p>` })
export class Demo implements OnInit, OnDestroy {
  intervalId: any;
  ngOnInit() {
    this.intervalId = setInterval(() => {/* ... */}, 1000);
  }
  ngOnDestroy() {
    clearInterval(this.intervalId);
  }
}

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish