Проекты на Angular

В этом проекте Angular, вы узнаете, как отображать и скрывать div, нажимая на переключатель в приложении Angular с помощью директивы ngModel.

Это краткое руководство демонстрирует манипуляции с DOM в Angular; необходимо реализовать скрытие и показ div при нажатии переключателя.

Чтобы создать такую функцию, я следовал шаблонному подходу для создания переключателей, привязки div к переключателям и скрытия и отображения после выбора.

• Шаг 1: Установите интерфейс командной строки Angular
• Шаг 2: Загрузите проект Angular
• Шаг 3: Импорт FormsModule в модуль приложения
• Шаг 4: Обновить шаблон компонента
• Шаг 5: Обновить HTML-шаблон
• Шаг 6: Запустите приложение Angular

Если вы еще не установили интерфейс командной строки Angular, выполните следующую команду, чтобы установить интерфейс командной строки Angular.

npm install -g @angular/cli

Этот шаг не требуется; однако, если вы еще не создали приложение angular, вы можете продолжить и выполнить предложенную команду.

ng new ng-demo

Теперь зайдите в каталог проекта.

cd ng-demo

npm install bootstrap

Добавьте CSS начальной загрузки в файл angular.json:

...
...
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
],
...
...

Теперь перейдите к основному файлу модуля приложения и импортируйте модуль форм, чтобы работать с угловой формой. Добавьте предложенный код в файл src/app/app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Чтобы настроить значения для переключателя, вам необходимо определить переменные в файле компонента приложения.

Обновите код в файле src/app/app.component.ts.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  
  sh: any = 1;
 
  ngOnInit() {     
  }
     
}

Внутри HTML шаблона angular определите переключатели, добавьте директиву ngModel, передайте ей значение, аналогичным образом определите проверенное состояние и значения.

Два дива изначально были скрыты и переходят в видимое состояние при нажатии переключателя.

Обновите код в файла src/app/app.component.html.

<div class="container ">

  <h3 class="text-center btn-primary mt-3 mb-3 pt-2 pb-2" >Как показать/скрыть Div при нажатии переключателя в Angular 13</h3>
  <div class="text-center pt-2 pb-2">

    <label>
      <input [value]="1" [(ngModel)]="sh" name="sh" type="radio" /> Иванов
    </label>

    <label>
      <input [value]="2" [(ngModel)]="sh" name="sh" type="radio" /> Петров
    </label>

    <label>
      <input [value]="3" [(ngModel)]="sh" name="sh" type="radio" /> Михайлов
    </label>
  </div>

  <div class="text-center btn-success btn-lg btn-block mt-3 mb-3 pt-4 pb-4" *ngIf="sh == 1">Иван</div>
  <div class="text-center btn-danger btn-lg btn-block mt-3 mb-3 pt-4 pb-4" *ngIf="sh == 2">Петр</div>
  <div class="text-center btn-warning btn-lg btn-block mt-3 mb-3 pt-4 pb-4" *ngIf="sh == 3">Михаил</div>

</div>

На заключительном шаге вам потребуется ввести указанную команду в командной строке и выполнить команду для запуска сервера приложений angular.

ng serve

Теперь откройте браузер, введите указанный URL-адрес для просмотра приложения.

http://localhost:4200

В этом проекте мы объяснили, как скрыть и показать HTML-раздел при нажатии переключателей в приложении Аngular 13 с помощью директивы ngModel.