클래스 전환을 위한 Angular ngClass 및 클릭 이벤트

클래스 전환을 위한 Angular ngClass 및 클릭 이벤트

Angular에서 사용하고자 합니다.ngClass이벤트를 클릭하여 클래스를 전환합니다.제가 온라인으로 찾아봤는데 각진 것도 있고 명확한 지침이나 예시가 없는 것도 있습니다.어떤 도움이라도 주시면 감사하겠습니다!

HTML에는 다음이 있습니다.

<div class="my_class" (click)="clickEvent($event)" ngClass="{'active': toggle}">
  Some content
</div>

인.ts:

clickEvent(event) {
  // Haven't really got far
  var targetEle = event.srcElement.attributes.class;
}

이것은 당신에게 효과가 있을 것입니다.

.html에서:

<div class="my_class" (click)="clickEvent()"  
    [ngClass]="status ? 'success' : 'danger'">                
    Some content
</div>

.ts에서:

status: boolean = false;
clickEvent(){
    this.status = !this.status;       
}

ts 파일에 함수를 만드는 대신 템플릿 자체에서 변수를 전환할 수 있습니다.그런 다음 변수를 사용하여 특정 클래스를 요소에 적용할 수 있습니다.그런 것처럼...

구성요소.요소 -

<div (click)="status=!status"  
    [ngClass]="status ? 'success' : 'danger'">                
    Some content
</div>

따라서 상태가 참이면 클래스 성공이 적용됩니다.잘못된 위험 클래스가 적용됩니다.

이것은 ts 파일에 추가 코드 없이 작동할 것입니다.
편집: 최근 버전의 Angular에서는 component.ts - 컨트롤러에서 변수를 선언해야 합니다.

status: boolean = false;

변수와 깨끗한 템플릿 없이 렌더러2를 사용하는 Angular6:

템플릿:

<div (click)="toggleClass($event,'testClass')"></div>

ts:

toggleClass(event: any, className: string) {
    const hasClass = event.target.classList.contains(className);

    if (hasClass) {
        this.renderer.removeClass(event.target, className);
    } else {
        this.renderer.addClass(event.target, className);
    }
}

이것도 지침에 넣을 수 있습니다 ;)

ngClass속성 바인딩이므로 대괄호로 묶어야 합니다.사용해 보십시오.

<div class="my_class" (click)="clickEvent($event)"  [ngClass]="{'active': toggle}">                
    Some content
</div>

구성 요소:

//define the toogle property
private toggle : boolean = false;
              
//define your method
clickEvent(event){
   //if you just want to toggle the class; change toggle variable.
   this.toggle = !this.toggle;       
}

도움이 되길 바랍니다.

HTML로 각도를 조절할 수 있는 유일한 방법을 찾고 있다면...

<div #myDiv class="my_class" (click)="myDiv.classList.toggle('active')">
  Some content
</div>

중요한 부분은#myDiv일부.

HTML 노드 참조이므로 해당 변수를 다음에 할당된 것처럼 사용할 수 있습니다.document.querySelector('.my_class')

참고: 이 변수는 범위에 따라 다르므로 다음에서 사용할 수 있습니다.*ngFor진술들

또한 ngClass를 사용하여 아래와 같이 여러 조건에 따라 여러 CSS 클래스를 할당할 수 있습니다.

<div
  [ngClass]="{
  'class-name': trueCondition,
  'other-class': !trueCondition
}"
></div>

토글 단추를 사용하여 텍스트를 토글하려는 경우.

부트스트랩을 사용하는 HTML 파일:

<input class="btn" (click)="muteStream()"  type="button"
          [ngClass]="status ? 'btn-success' : 'btn-danger'" 
          [value]="status ? 'unmute' : 'mute'"/>

TS 파일:

muteStream() {
   this.status = !this.status;
}

따라서 일반적으로 클래스에 백업 변수를 생성하고 클릭하면 이 변수를 전환하고 변수에 클래스 바인딩을 연결합니다.다음과 같은 것:

@Component(
    selector:'foo',
    template:`<a (click)="onClick()"
                         [class.selected]="wasClicked">Link</a>
    `)
export class MyComponent {
    wasClicked = false;

    onClick() {
        this.wasClicked= !this.wasClicked;
    }
}

이거 드셔보세요.

Html.

<button *ngFor="let color of colors; let index=index" class="example1" 
        (click)="selectColor(index)" [class.choose__color]="viewMode == index">
    <mat-icon>fiber_manual_record</mat-icon>
</button>

대소문자

.example1:hover {
    border-bottom: 2px solid black;
}

.choose__color {
     border-bottom: 2px solid black;
}

ts.

selectColor(index: any) {
    this.viewMode = index;
}

언급URL : https://stackoverflow.com/questions/44535515/angular-ngclass-and-click-event-for-toggling-class