angular-bootstrap

I have 3 root components that get bootstrapped by the root AppModule . How do you go about specifying an @Input() parameter to one of those components? Neither <app-modal [id]="'hard-coded value'"></app-modal> <app-modal [id]="constantExportedByAppmodule"></app-modal> are picked up by AppModalComponent : @Input() id: string; It is undefined. As far as I know, you can not pass @Input() to a bootstraped component. But you can use another way to do that - pass the value as an attribute. index.html : <my-app myAttribute="myAttributeValue"> <div>Loading...</div> </my-app> app.component.ts :

I'm trying to use the Angular UI Dropdown Toggle to create a multi-level / nested drop down. When I click on the first level of the dropdown it simply closes up altogether and does not reveal the second tier. I've attached a very basic plunkr to demonstrate a bare bones version of what I'm trying to achieve. http://plnkr.co/edit/c0GbKQoYWICXwd3JRWGV?p=info Any help, greatly appreciated. Thanks Zymotik Sub-menu has been removed from Boostrap 3 as it is deemed irrelevant for mobile. "Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed

This is a bit strange. When I search this issue online I see many pages of Google results and SO solutions... but none seem to work! In a nutshell, I am trying to implement AngularUI Bootstrap Modal. I keep getting the following error: Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- addEntryCtrl Here is my HTML: <nav class="navbar navbar-default"> <div class="container"> <span class="nav-col" ng-controller="navCtrl" style="text-align:right"> <a class="btn pill" ng-click="open()" aria-hidden="true">Add New</a> </span> </div> </nav> Here is my

I want to make a custom CSS class for tooltip which will wrap a string of length more than 25-30.Usually such a long text doesn't fit into the tootltip text area. And is there anyway to do this using Tooltip (ui.bootstrap.tooltip) ? Like using custom CSS class to get the desired output. This is the simple css tooltip - Plunker DEMO Here is the code Snippet for the same : .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { max-width:100px; padding:15px; min-height:30px; background:#fff; visibility: hidden; border: 1px solid black;

Check this PLNKR , i have implemented typeahead control, By default in type ahead control they are not setting any max-height or height to list, but as per requirement i have to fix height of list to 110px. So, when we have longer list at a time only 4 data will be shown and rest can be seen by scrolling down. Scrolling is working while user click on scroll up/down arrows, but it's not working with keyboard up/down keys. The problem is explained in steps:- Type something i.e "a" to get data in typeahead (list will be populated) Press down-arrow key (focus will be on list item) Press down-arrow