Dom manipulation in Angular

Question

How to handle DOM manipulation in Angular. I don't want to use jQuery.

Following is my jQuery code:

$(".next-step").click(function (e) {
    var $active = $('.wizard .nav-tabs li.active');
    $active.next().removeClass('disabled');
    nextTab($active);

});

function nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();
}

Basically I have breadcrumbs I want to go to next tab of it.

Please change tag from `angular` to `angularjs` if you are looking answer for Angular 1.x. As the tag `angular` is strictly for Angular 2/4. — The Hungry Dictator, Aug 08 '17 at 09:22
With Angular 2+ , usually, you should not manipulate the DOM, that's renderer's job. Please post your component's code and elaborate a bit your question, it is unclear for now. — n00dl3, Aug 08 '17 at 09:24
I guess that this article will be helpful for you: https://hackernoon.com/top-common-mistakes-of-angular-developers-2a36524f2c21 You should read chapter "Mutating the dom directly" — Jaroslaw K., Aug 08 '17 at 09:29
You should'nt need to check out https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background but if you need to , does this help as a starting point? https://stackoverflow.com/questions/22447374/how-to-trigger-ngclick-programmatically — Steve Drake, Aug 08 '17 at 12:40
@Ankit you have to use pure js for this, else you can use 'angular.element' (jqlite) instead of '$'. — Rishi0405, Aug 09 '17 at 05:46

Ankit Raonka · Accepted Answer · 2017-08-11T09:54:30.727

Renderer2 is used for DOM manipulation in Angular 4.

@ViewChildren('list') list:QueryList<ElementRef>;

    next(){
        var index = this.list.toArray().findIndex(i => i.nativeElement.classList.contains('active'));   
        var sibling = this.list.toArray()[index+1].nativeElement;
        this.renderer.removeClass(sibling,'disabled');
        this.nextTab(sibling);
    }

    nextTab(elem) {
        var elemChildren = elem.children;
        elemChildren[1].click();

}

Above is how i converted the above code.

Used ViewChildren and Marked my li with #list. (some reference)

Dom manipulation in Angular

1 Answers1