Как сделать компонент для показа сообщений об ошибках?

Для создания компонента, который будет отображать сообщения об ошибках, следуйте этим шагам:

Создайте новый компонент с помощью Angular CLI команды ng generate component error-message.
```
ng generate component error-message
```
Это создаст новую директорию error-message с соответствующими файлами компонента.
Откройте файл error-message.component.ts и добавьте следующий код:
```
import { Component, Input } from '@angular/core'

@Component({
	selector: 'app-error-message',
	template: `
		<div class="error-message">
			<p>{{ message }}</p>
		</div>
	`,
	styles: [
		`
			.error-message {
				background-color: #ffcccc;
				padding: 10px;
				margin-bottom: 10px;
			}
		`
	]
})
export class ErrorMessageComponent {
	@Input() message: string
}
```
В этом коде мы создаем компонент ErrorMessageComponent, который принимает сообщение об ошибке через свойство message с помощью декоратора @Input. В шаблоне компонента мы отображаем сообщение об ошибке внутри <p> элемента, а также добавляем стили для отображения ошибки.
Теперь вы можете использовать компонент ErrorMessageComponent в других компонентах, где требуется отображение сообщений об ошибках. Например, предположим, что у вас есть компонент UserFormComponent, который содержит форму для создания нового пользователя. Если возникает ошибка при отправке формы, вы можете использовать ErrorMessageComponent для отображения сообщения об ошибке.

Откройте файл user-form.component.html и добавьте следующий код:
```
<form (ngSubmit)="createUser()">
	
</form>
<app-error-message *ngIf="errorMessage" [message]="errorMessage"></app-error-message>
```
В этом примере мы используем ErrorMessageComponent с помощью тега <app-error-message>. Мы также добавляем директиву *ngIf для условного отображения компонента только в том случае, если есть сообщение об ошибке (errorMessage). Сообщение об ошибке передается в компонент через свойство [message].

В компоненте UserFormComponent добавьте код для обработки ошибок и установки соответствующего сообщения об ошибке.

import { Component } from '@angular/core'

@Component({
	selector: 'app-user-form',
	templateUrl: './user-form.component.html'
})
export class UserFormComponent {
	errorMessage: string

	createUser() {
		// Логика создания нового пользователя
		// Если возникает ошибка, установите соответствующее сообщение об ошибке
		this.errorMessage = 'Ошибка при создании пользователя.'
	}
}

В этом примере мы имитируем создание нового пользователя в методе createUser(). Если возникает ошибка, мы устанавливаем соответствующее сообщение об ошибке в свойство errorMessage.

Теперь, при возникновении ошибки при создании пользователя, компонент ErrorMessageComponent будет отображаться и показывать сообщение об ошибке. Вы можете настроить стили и расширить функциональность компонента ErrorMessageComponent по своему усмотрению.

Little Angular programmer's library

Как сделать компонент для показа сообщений об ошибках?