Angular2 RC1 multi level routerLink directive - angularjs

still struggling with the new component router as of Angular2 RC.1.
My app's components are assembled in this manner:
Main
- NavigationBarComponent
- ContentComponent
- UserComponent
- UserSettingsComponent
- UserNotificationComponent
- CarComponent
- CarDetailsComponent
- ...
The routing works fine for ContentComponent and all its child components. The issue is creating routes within the NavigationBarComponent, which is a permanently visible component offering some shortcuts to components.
If I assemble a link from the NavigationBarComponent to the UserSettingsComponent, the route should look like this:
/user/:id/settings
I managed to create such a link with this:
<a [routerLink]="['/user/'+loggedInUser.id+'/settings']">
Concatening a link like this seems pretty ugly and wrong, though. I've tried a syntax like it was used in the deprecated routing of the beta versions
<a [routerLink]="['/user/:id/settings',{'id':loggedInUser.id}]">
but the output looked like this:
/user/:id/settings;id=56edad04c506d7e7963edd48
I couldn't find any examples for this requirement in the docs or live examples. Any suggestions? Thanks in advance.

It should be:
<a [routerLink]="['/user', 'loggedInUser.id', 'settings']">

Related

Panel.Collapse in React-Bootstrap v1

I am migrating from react-bootstrap v0.32.4 to v1.0.0-beta.5 and it is written in the migration guide that Panel has been replaced by the Card component.
However, I cannot find anything in the new documentation of Card similar to the old Panel.Collapse from v0.32.
How can the following (from v0.32.4) be done with react-bootstrap v1 by not mixing clean JSX code with plain bootstrap css classes (e.g. accordion)?
<Panel>
<Panel.Heading>
<Panel.Title toggle>Click Me</Panel.Title>
</Panel.Heading>
<Panel.Collapse>
<Panel.Body>Collapsible Body</Panel.Body>
</Panel.Collapse>
</Panel>
It took a bit of digging, but I found this link:
https://react-bootstrap.github.io/utilities/transitions/#collapse
where it appears to have extracted the Collapse logic out of Panel and put it into it's own component, managed by boolean state.

Chips autocomplete for Angular 1.6. No angular-material

I would need to add an autocomplete chips component in our Angular 1.6 application. We are using Typescript, Webpack 2. As we are already using angular-ui-bootstrap, we do not want to introduce also angular-material in order to avoid style conflicts. However the wished result is exactly what material chips provide.
Is there a directive or component that i can use in my case? I found this library but it runs endless exceptions when I import it.
unfortunately I could find only partial solutions with bootstrap typehead, but then I would need to implement all the "chips" part, making me think of re-inventing the wheel.
Stack Newb here. I have an identical problem as yours. Here's how I resolved this:
1. Resolve the ReferenceError: error is not defined within the angular-chips library
The library you used (angular-chips) wasn't designed with typescript in mind. So, you'll first need to resolve the following error ReferenceError: error is not defined by defining it for them in the line above with var error;. This should prepare angular-chips for your webpack useage.
The second issue you'll find is how to add your typeahead-template-url with webpack in the mix. Rather than referring to a separate html file, use an inline template as referenced here: Bootstrap-UI Typeahead display more than one property in results list?.
If you're lazy like me and don't want to follow that hyperlink, use this as example:
2. Template to be added before the <chips> tag:
<script type="text/ng-template" id="yourTemplate.html">
<a tabindex="-1">
<i ng-class="'icon-'+match.model.type"></i>
<span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
</a>
</scrip>
3. Include template in your directive:
typeahead-template-url:"yourTemplate.html"
Worked like a charm for me.

Angular2 Localized URL, Named Routes

We are currently trying to have named routes in our SPA. Depending on the language, we should have:
www.website.com/help
www.website.com/ayuda
www.website.com/hifen
Also, in our references, we should be able to configure:
href=“/help”
href=“/ayuda”
href="/hilfe"
Depending on the language
Does Angular2 router support this?
(if not, how can we achieve it?)
There is a package called localize-router which extends ng2-translate and should do exactly what you're looking for. Please have in mind that it's still in progress so it's probably not recommended for the production yet.
Please find it here: https://www.npmjs.com/package/localize-router
You can use pipes to translate route links
<a [routerLink]="['user', userId, 'profile'] | localize">{{'USER_PROFILE' | translate}}</a>
<a [routerLink]="['about' | localize]">{{'ABOUT' | translate}}</a>
Another package for the same purpose #ngx-i18n-router/core, works with static translations as well as providing route translations through http.
Check it here: https://www.npmjs.com/package/#ngx-i18n-router/core
supports lazy routes as well.
Pipe usage is same as above.

Show part of next slides in ionic2/swiper slider

I am using Ionic2 slider which is using the Swiper under the hood. I have built a carousel that shows 3 at a time but I would like the fourth slide to show partly so the user knows there is more slides (can't use pagination dots). I can't see any configuration (either on Ionic API or Swiper API) to achieve. Is anyone aware of a configuration or a "non-hacky" way of achieving this. I have attached screenshot of what the design is suppose to look.
Try something like this in the template ...
<ion-slides [options]="sliderOptions"> ... <
And in your .ts class ...
export class ClassWithSlider {
// slider options
sliderOptions = {
slidesPerView:4,
centeredSlides:true
};
}
The reference for the options can be found here, in section Swiper Parameters.

Drupal - How to add data-attributes to <li> items of a <ul> Menu

This is such a great script called fullPage.js located here: https://github.com/alvarotrigo/fullPage.js
I managed to load the js file and css file and even with the Void Menu Module, managed to call anchor links, but I'm struggling with the data attributes part of the implementation of this cool code! Any help is greatly appreciated! How do I get data-attributes to work in Drupal 7.25? I mean, I need to add them to the menu, so that the html looks something like this:
<ul id="menu">
<li data-menuanchor="firstPage">First slide</li>
<li data-menuanchor="secondPage">Second slide</li>
<li data-menuanchor="3rdPage">Third slide</li>
<li data-menuanchor="4thpage">Fourth slide</li>
</ul>
Just want to add it to the Main Menu in Drupal. Any idea how? Am trying to implement this on my homepage and using the Adaptive Sub-Theme with Display Suite Module installed, if that helps any.
Have added the following to template.php, but it makes no difference at all:
function MY_THEME_NAME_menu_link(&$variables) {
$variables['element']['#attributes']['data-menuanchor'] = substr($variables['element']['href'], 1);
return theme_menu_link($variables);
}
What am I doing wrong here?
EDIT
You can download the sitemaniacs theme here: http://dream-portal.net/dpdowns/MyProblem.zip
You can just download Adaptive Theme from Drupal here and than copy sitemaniacs to your sites/all/themes folder and than just enable the theme and go to your homepage.
There is also a folder called fullPage that is the example of it working perfectly fine without Drupal.
Files to take note of:
/sites/all/themes/sitemaniacs/scripts/custom.js
/sites/all/themes/sitemaniacs/template.php
/sites/all/themes/sitemaniacs/css/example2.css
/sites/all/themes/sitemaniacs/sitemaniacs.info
Let me know if you need anything else, k?
And Thank YOU!!! What I've done is create 4 Basic Pages, and using the Field Formatter Class Module to give the body field a class (when managing the Display) defined as section, than promoted to front page. Than I used HTML within another Node Type and used NodeBlock Module to output it as a menu item within the Menu Bar section of the blocks, with url <front>. Let me know if you need anything else for this, but I can't get it to work using this simple approach. I've tried tons of ways of doing it also, but no go for me. If you find a method that works, or perhaps something is wrong somewhere else, please please let me know.... I'm pulling out my hair on this one.
Have tried straight HTML, and now getting this:
Uncaught TypeError: Cannot read property 'top' of undefined jquery.fullPage.js?mzf0rp:506
scrollPage jquery.fullPage.js?mzf0rp:506
doneResizing jquery.fullPage.js?mzf0rp:889
The first error seems to occur in the scrollPage function on this line here:
var dtop = dest !== null ? dest.top : null;
Looks like dest.top is not defined on .top. Any idea why?
Use the Menu Link Attributes module that will let you add custom attributes per menu item.
for "href" you can use <'front'>#4thpage(front without any “cotation”) in path in menu that you create in Structure > Menus and use the Menu Link Attributes module for other attributes

Resources