> 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.md).
# Angular Components
Одними з ключових елементів аплікації є компоненти. Компонент управляє представленням (view) на екрані.
Розглянемо головний компонент аплікації **app.component**, який складається з чотирьох елементів.
{% tabs %}
{% tab title="app.component.ts" %}
{% code 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() {
}
}
```
{% endcode %}
{% endtab %}
{% tab title="app.component.html" %}
{% code overflow="wrap" lineNumbers="true" %}
```markup
test text
```
{% endcode %}
{% endtab %}
{% tab title="app.component.css" %}
{% code overflow="wrap" lineNumbers="true" %}
```css
h1 {
color: red;
}
```
{% endcode %}
{% endtab %}
{% tab title="app.component.spec.ts" %}
{% code overflow="wrap" lineNumbers="true" %}
```typescript
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
Щоб створити новий компонент з допомогою Angular CLI потрібно в командному рядку запустити наступну команду
{% code title="cmd" %}
```
ng generate component new-component-name
```
{% endcode %}
Слова **generate** і **component** можна скорочувати і писати лише літеру **g** та **c**
{% code title="cmd" %}
```
ng g c new-component-name
```
{% endcode %}
Використання компонента
{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}
```markup
```
{% endcode %}
{% hint style="info" %}
Також з допомогою команд Angular CLI можна створювати й інші елементи аплікації, такі як модулі, сервіси, директиви, пайпи й т.д. Принцип залишається такий самий як при створенні компонента, тільки замість слова components, підставляємо потрібне нам слово (module, service ...).
{% endhint %}
## Завдання.
* Скачуємо **Bootstrap**.
{% code title="cmd" %}
```
npm install bootstrap --save
```
{% endcode %}
* Підключаємо **Bootstrap CSS**.
{% code title="angular.json" %}
```javascript
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
```
{% endcode %}
Якщо ми використовуємо препроцесор Scss то можна підключити в файлі **styles.scss**.
{% code title="styles.scss" overflow="wrap" lineNumbers="true" %}
```css
/* Bootstrap */
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
```
{% endcode %}
* Підключаємо **icons** та **font**.
{% tabs %}
{% tab title="index.html" %}
{% code lineNumbers="true" %}
```markup
```
{% endcode %}
{% endtab %}
{% tab title="styles.css" %}
{% code overflow="wrap" lineNumbers="true" %}
```css
body {
font-family: 'Open Sans', sans-serif;
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
* Створюємо **header** компонент.
{% code title="cmd" %}
```
ng g c components/header
```
{% endcode %}
{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}
```markup
```
{% endcode %}