Angular2 sibling element selector

Question

I wanted to hide all the previous elements, which is before .map-page element.

I'm loading ionic app and I need to hide previous pages if .map-page is detected on the dom.

in jQuery this is so simple $('.map-page').siblings().hide() , but in angular 2.. I'm not sure which functions to use to do that.

Answer 1

Since you're traversing the dom, in angular, it is suggested that you use a directive. Inside your directive, you have access to $element

EX:

app.directive('hide-siblings', function() {
    return {
        link: function($scope, $element, $attrs) {
                $element.siblings().hide()
        },
    }
});

EDIT: That is only if you have jquery and also probably not the best way. It may be better to add this directive to all your elements and use:

app.directive('hide-siblings', function() {
    return {
        link: function($scope, $element, $attrs) {
            if(!$element.hasClass('map-page'))
                $element.hide()

        },
    }
});