Angular material тег mat-checkbox зачеркнуть текст при checked true

Question

Всем доброго времени суток Есть такой чекбокс:

 <section class="example-section">
      <mat-checkbox class="example-margin" (change)="func" [checked]="value">
        <span class = "span-check">{{todo?.title}}</span></mat-checkbox>
    </section>

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

.example-margin:checked + .span-check {
  text-decoration:line-through;
}

Answer 1

псевдокласс :checked работает и должен работать только для элементов с возможностью чекания, то есть, чекбоксов. Белиберда mat-checkbox таковым не является - все нестандартные теги браузер трактует так же как обычный span.

В вашем случае поможет селектор атрибутов, например:

.example-margin[checked="true"] .span-check {
  text-decoration:line-through;
}

вот только ваш атрибут [checked] содержит квадратные скобки, их нужно убрать.

оператор + в вашем CSS лишний.

Answer 2

Решила вопрос конструкцией ngIf, которая проверяет true или false и в зависимости от результата выводит span нужного класса


    <section class="example-section">
      <mat-checkbox class="example-margin" (change)="onCheckBoxUpdate(todo.id)" [checked]="todo.is_completed">
        <span class = "span-check" *ngIf="todo.is_completed === true; else unComplete">{{todo?.title}}</span>
        <ng-template #unComplete>
          <span>{{todo?.title}}</span>
        </ng-template>
      </mat-checkbox>
    </section>

Решение возможно не очень красивое, буду рада если кто то подскажет лучшее

БЛОГ НА HUSL

Angular material тег mat-checkbox зачеркнуть текст при checked true

Ответы (2 шт):