angular 2 and custom dropdown menu

Question

I'm creating a Ribbon component for angular 2 (essentially to learn angular 2 ^^) and I'm wondering how to make a dropdown menu in the angular 2 way. Of course, I could use bootstrap or even jQuery, but I'm wondering what's the best way to do that from within my component. Indeed, I could just do a method in my TypeScript file that will do something like :

("my-dom-menu").slideDown()

However, I know that in Angular 1, it's not a best practice to mess with the DOM directly from within the controller so I guess it's still the case with angular 2.

Would it be a better idea to create a directive that is supposed to display the menu when I click on a button ? Is it better to mess with the DOM from within a directive than from a component ?

Thanks

I think the best approach is to create a dropdown-menu component and add it to your view. — Günter Zöchbauer
– Günter Zöchbauer, Commented May 24, 2016 at 9:18
Okay but the problem stays the same. In the "dopdown-menu" component, where do I execute the JavaScript that positions the div from? Just from within a method? Isn't it "against best practices"? — ssougnez
– ssougnez, Commented May 24, 2016 at 9:20
component codes only change data please. do data-binding in component template. — Jiang YD
– Jiang YD, Commented May 24, 2016 at 9:23
Sorry but this does not really help me... Even if I specify something in my template, I still have to position the "div" when the user clicks on the button, so... where to put this code? — ssougnez
– ssougnez, Commented May 24, 2016 at 9:43

score 1 · Accepted Answer · 2016-05-24 11:54:00Z

1

Your menu would be a component.

import {Component} from '@angular/core';

@Component({
   selector:'my-drop-down-menu',
   templateUrl:'./my-drop-down-menu.html' // this is where you would add the div
})

export class MyMenuComponent{
    // actions happen here
}

html

<my-drop-down-menu></my-drop-down-menu> <-- pulls in my-drop-down-menu.html -->

If you go through the tutorial on angular.io you will get it in no time https://angular.io/docs/ts/latest/tutorial/

edited May 24, 2016 at 11:54

answered May 24, 2016 at 11:43

user1752532

Sign up to request clarification or add additional context in comments.

1 Comment

ssougnez Over a year ago

I think I see what you mean. I focused on the fact that when I click on the arrow of the menu, some Javascript had to be executed that would calculate the position of the div to show but maybe I can achieve that with CSS without any calculation... I'll try that, thanks.

Collectives™ on Stack Overflow

angular 2 and custom dropdown menu

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related