Блог

Главная - Вопросы по программированию - как изменить стиль кнопки onclick в angular?

как изменить стиль кнопки onclick в angular?

#angular

Вопрос:

Мне нужно изменить стиль кнопки при срабатывании события щелчка.

Я просмотрел и узнал, как использовать [class] свойство, но не уверен, как его реализовать. Мне нужно вызвать класс css после срабатывания события click.

 <button type="button" [disabled]="isdisabled"
   style="background: #79CEA4 !important;color: #FFFFFF !important;font-size: 13px;font-weight: 600;margin-right: 10px"
   class="btn  btn-lg"  (click)="start(tId,uId)"> START
</button>

Комментарии:

1. Почему бы не использовать :наведение, :фокусировка, :активен в css?

2. вы хотите, чтобы этот класс был активен только при нажатии на него? Или если он был нажат один раз?

3. @Powkachu я хочу отключить эту кнопку,но уже есть одно свойство отключения . Поэтому я решил изменить цвет кнопки на серый, а события указателя-на нет. Мне нужно это сделать, если нажата кнопка

4. @Hosh Вы имеете в виду в элементе проверки ?

Ответ №1:

Создайте переменную переключения в .ts (щелкните: логическое значение) и установите значение true в методе обработчика событий click.

Затем добавьте этот атрибут в HTML-элемент:

  [ngClass]="{'your-class' : clicked}"

Он добавляет список классов css с заданным именем класса, если выбранная переменная имеет значение true.

Ответ №2:

Это пример использования клика event .

 <button
        type="button"
        [disabled]="isdisabled"
        style="
          background: #79cea4 !important;
          color: #ffffff !important;
          font-size: 13px;
          font-weight: 600;
          margin-right: 10px;
        "
        class="btn btn-lg"
        (click)="start($event,tId,uId)"
        >START</button>

Теперь в вашем typescript методе start и вы можете использовать этот пример ниже:

 start(event: MouseEvent amp; { target: HTMLElement }, tId, uId): void {
    console.log('start');

    // change style
    event.target.style.background = 'orange';

    // add class
    event.target.classList.add('example-class');
  }

Этот код выше просто пример. Потому что вы можете использовать [ngClass] или [ngStyle] . Это твой выбор.

Комментарии:

1. пожалуйста, используйте «Угловой способ». Помните: в Angular у вас есть переменные в .ts и используйте эти переменные в .html, вы можете использовать [ngClass] или [class] или [ngStyle] или [style.property]

2. Пожалуйста, прочитайте мой ответ выше, мне сказали, что это пример. Но вы можете использовать [ngClass] и [ngStyle]. Я думаю, что в этом ответе нет ничего неправильного, поэтому суть этого вопроса заключается в том, как изменить стиль кнопок.

3. Титус, вы можете изменить фон несколькими способами, По моему личному мнению, с помощью event.target.style.background или event.target.classList.add не являются «достаточно близкими» к Angular (и вопрос касается Angular), но это только мое личное мнение.

Метки: