angular2에서 addClass 및 removeClass 기능 구현

angular2에서 addClass 및 removeClass 기능 구현

ListView와 GridView 버튼이 몇 개 있습니다.이 두 버튼 사이를 전환하기 위해 아래와 같이 JQuery를 작성했습니다.

<script type="text/javascript">
    $(document).ready(function () {
        $("button.switcher").bind("click", function (e) {
            e.preventDefault();
            var theid = $(this).attr("id");
            var theitems = $("ul#items");
            var classNames = $(this).attr('class').split(' ');
            if ($(this).hasClass("active")) {
                // if currently clicked button has the active class
                // then we do nothing!
                return false;
            } else {
                // otherwise we are clicking on the inactive button
                // and in the process of switching views!
                if (theid == "gridview") {
                    $(this).addClass("active");
                    $("#listview").removeClass("active");
                    // remove the list  view and change to grid
                    theitems.removeClass("tilelist");
                    theitems.addClass("gridlist");
                }

                else if (theid == "listview") {
                    $(this).addClass("active");
                    $("#gridview").removeClass("active");
                    // remove the grid view and change to list
                    theitems.removeClass("gridlist")
                    theitems.addClass("tilelist");
                }
            }

        });
    });
</script>

이제 이 기능을 Jquery에서 Angular2 typescript application으로 이동하고 싶습니다.이것에 대해 누가 저를 안내해 주실 수 있나요?angular2 템플릿에서 버튼 클릭 시 addClass 및 removeClass 기능을 구현하려면 어떻게 해야 합니까?

이를 component.ts에 적용하려면

HTML:

<button class="class1 class2" (click)="clicked($event)">Click me</button>

구성 요소:

clicked(event) {
  event.target.classList.add('class3'); // To ADD
  event.target.classList.remove('class1'); // To Remove
  event.target.classList.contains('class2'); // To check
  event.target.classList.toggle('class4'); // To toggle
}

자세한 옵션, 예제 및 브라우저 호환성은 이 링크를 참조하십시오.

다음을 통해 사용해 보십시오.[ngClass]속성:

<div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
         (click)="toggle(!isOn)">
         Click me!
     </div>`,

그냥 사용하는 게 어때요?

<div [ngClass]="classes"> </div>

https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

기본적으로 [ngClass]를 사용하여 클래스를 전환할 수 있습니다.

예를들면

<button [ngClass]="{'active': selectedItem === 'item1'}" (click)="selectedItem = 'item1'">Button One</button>
<button [ngClass]="{'active': selectedItem === 'item2'}" (click)="selectedItem = 'item2'">Button Two</button>

Angular 13+에서는 다음 업데이트를 사용하여 Malik의 코드가 작동하도록 했습니다.

구성 요소:

clicked(event: any) {
    event.target.classList.add('class3'); // To add
    event.target.classList.remove('class1'); // To remove
    event.target.classList.contains('class2'); // To check
    event.target.classList.toggle('class4'); // To toggle
  }

언급URL : https://stackoverflow.com/questions/38774014/implement-addclass-and-removeclass-functionality-in-angular2