При разработке Angular выполнение условных действий является распространенным требованием. Будь то отображение или скрытие элементов, выполнение определенной логики на основе условий или обработка взаимодействия с пользователем, очень важно иметь четкое представление о различных методах обработки условных действий в Angular. В этой статье мы рассмотрим 10 популярных методов вместе с примерами кода, которые помогут вам освоить условные действия в Angular.

1. Директива ngIf:
   ДирективаngIf — это мощный инструмент в Angular, который условно добавляет или удаляет элементы из DOM на основе заданного выражения. Он позволяет контролировать видимость элементов, компонентов или разделов шаблона.

<div *ngIf="condition">This element is shown when the condition is true.</div>

1. Директива ngSwitch:
   ДирективаngSwitch полезна, когда у вас есть несколько условий и вы хотите отображать разные элементы на основе каждого условия. В JavaScript он действует как оператор переключения.

<div [ngSwitch]="condition">
  <div *ngSwitchCase="case1">Rendered when condition matches case1.</div>
  <div *ngSwitchCase="case2">Rendered when condition matches case2.</div>
  <div *ngSwitchDefault>Rendered when no condition matches.</div>
</div>

1. Атрибут [скрытый]:
   Атрибут [скрытый] позволяет скрывать или отображать элементы путем оценки условия. В отличие от *ngIf, он не удаляет элемент из DOM; вместо этого он устанавливает для свойства CSS displayзначение none.

<div [hidden]="condition">This element is hidden when the condition is true.</div>

1. Директива ngClass:
   Директива ngClass позволяет условно применять классы CSS к элементам на основе определенных условий. Это полезно для динамического добавления или удаления стилей.

<div [ngClass]="{'class-name': condition}">This element has a class applied when the condition is true.</div>

1. Директива ngStyle:
   Подобно ngClass, директива ngStyle позволяет условно применять встроенные стили к элементам на основе условий.

<div [ngStyle]="{'color': condition ? 'red' : 'blue'}">This element has red color when the condition is true.</div>

1. Тернарный оператор.
   Вы можете использовать тернарный оператор в шаблонах Angular для выполнения условных действий внутри выражения.

{{ condition ? 'Action when true' : 'Action when false' }}

1. ngIf-else:
   Начиная с Angular 4.3, вы можете использовать предложение else с *ngIf для определения альтернативного контента, когда условие ложно.

<div *ngIf="condition; else elseBlock">This element is shown when the condition is true.</div>
<ng-template #elseBlock>
  <div>Alternative content when the condition is false.</div>
</ng-template>

1. Компонентный подход:
   Вы можете создать отдельный компонент специально для условных действий и использовать его там, где это необходимо. Такой подход повышает возможность повторного использования кода и сохраняет чистоту шаблонов.

@Component({
  selector: 'app-conditional-action',
  template: `
    <ng-container *ngIf="condition">
      <!-- Conditional action content here -->
    </ng-container>
  `
})
export class ConditionalActionComponent {
  @Input() condition: boolean;
}

1. Реактивные формы.
   При работе с формами в Angular вы можете использовать реактивные формы и использовать валидаторы элементов управления формой и изменения значений для выполнения условных действий.

this.myForm.get('myControl').valueChanges.subscribe(value => {
  if (value === 'specificValue') {
    // Perform conditional action
  }
});

1. Пользовательские директивы.
   Если ни одна из встроенных директив или подходов не соответствует вашим требованиям, вы можете создать собственные директивы для обработки сложных условных действий.

@Directive({
  selector: '[appConditionalAction]'
})
export class ConditionalActionDirective {
  @Input() appConditionalAction: boolean;
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}
  ngOnInit() {
    if (this.appConditionalAction) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

К этому моменту вы должны хорошо понимать различные методы обработки условных действий в Angular. Независимо от того, решите ли вы использовать такие директивы, как ngIf иngSwitch, использовать атрибуты, такие как [скрытый], или использовать компонентный или пользовательский подход, выбор зависит от вашего конкретного варианта использования. Поэкспериментируйте с этими методами и найдите тот, который лучше всего соответствует требованиям вашего проекта. Приятного кодирования!