> For the complete documentation index, see [llms.txt](https://koziuk-s.gitbook.io/angular-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koziuk-s.gitbook.io/angular-starter/angular-components/robota-z-komponentami.md).

# Робота з компонентами

### **ng-content**

**ng-content** - це елемент, що дозволяє передати HTML контент з батьківського компонента в дочірній.

```markup
<ng-content></ng-content>
```

Приклад:

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<app-footer>
  <h2>Footer title</h2>
</app-footer>
```

{% endcode %}

{% code title="footer.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<footer>
  <ng-content></ng-content>
</footer>
```

{% endcode %}

{% hint style="info" %}
Проте стилізуємо переданий HTML контент  в батьківському компоненті.
{% endhint %}

### Взаємодія між компонентами

**@Input()** - дозволяє прив'язати дані з батьківського елемента дочірньому.

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<app-header [title]="headerTitle"></app-header>
```

{% endcode %}

{% code title="header.component.ts" overflow="wrap" lineNumbers="true" %}

```typescript
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  @Input() title: string;
  
  constructor() {
  }
  
  ngOnInit() {}
}
```

{% endcode %}

### Прив'язка до події в дочірньому елементі

**@Output()** - дозволяє передати подію з дочірнього елемента батьківському.

{% code title="header.component.ts" overflow="wrap" lineNumbers="true" %}

```typescript
import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  @Output() headerText = new EventEmitter<string>();
  
  constructor() {
  }
  
  ngOnInit() {
    this.someEvent();
  }

  private someEvent() {
    this.headerText.emit('Some text in header');
  }
}
```

{% endcode %}

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<app-header (headerText)="onHeaderTitle($event)"></app-header>
```

{% endcode %}

{% code title="app.component.ts" overflow="wrap" lineNumbers="true" %}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() {
  }
  
  onHeaderTitle(text: string): void {
    console.log(text);
  }
}
```

{% endcode %}

### Життєвий цикл компонента

Після створення компонента фреймворк Angular викликає у цього компонента ряд методів, які представляють різні етапи життєвого циклу.

| Метод             | Викликається                                                    |
| ----------------- | --------------------------------------------------------------- |
| **ngOnInit()**    | при ініціалізації компонента.                                   |
| **ngOnDestroy()** | перед видаленням компонента.                                    |
| **ngOnChanges()** | перед методом ngOnInit() та при зміні властивостей в прив'язці. |