Carbon: Carbon Interactive Components not working in Angular 4 when AuthGuard is implemented

[dessty]

Description

Interactive Carbon components (datatable, accordion, content-switcher, dropdown, tabs, toggles , tooltip, etc..) are not working with Angular AuthGuard module.

Detailed description

This is a bug.
Our Angular4 application supports routing system(routes protection via authentication) using AuthGuard module and CanActivate Angular core features. We recently integrated authentication in our app, and it seems that the AuthGuard module prevents the (interacting) carbon components from behaving as expected.
Whereas left-navigation elements expanded/collapsed, or tabs switched when a click was triggered, Since the implementation of routing using AuthGuard (see app.module.ts.14) these same component stop working.

Is this issue related to a specific component?

Yes, all component requiring Carbon JS library such as (datatable, accordion, content-switcher, dropdown, tabs, toggles , tooltip, etc..)

What browser are you working in?

• Chrome 62.0.3202.94
• Firefox 57.0 (64-bit)

What version of the Carbon Design System are you using?
Bug reproduced using:

• Carbon 8.1.8 (used in the sample app)
• Carbon 7.26.10 (used in our production app)

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

We are 4 sprints (2 months) in working on the V2 of our Web Portal: a system for automating the rules that govern traffic through firewalls that are managed by a service provider. We are release every sprint a new functionalities that we present to our endusers.

This bug is blocking since our interface is fully integrated with Carbon components
(table pagination & sorting, left navigation expansion/collapsing, dropdown, etc...)

Steps to reproduce the issue

1. Install sample app locally repo here
2. Run npm install then ng serve
3. Launch localhost:4200
4. Using the different carbon component, try to switch tab, try to toggle accordion, etc..)

[asudoh]

@dessty Took a brief look at the repo, and saw the Tab, Accordion, Slider, etc. components after I hit the "Sign In" button. Those Carbon components started working as soon as when I put CarbonComponents.watch() in Chrome DevTools console and hit Enter. It means that it's likely the DOM for Carbon components are created after DOMContentLoaded event, and/or CarbonComponents.init() being called.

The recommendation for using JavaScript frameworks that dynamically create DOM is creating "wrapper component" described in http://www.carbondesignsystem.com/getting-started/developers. Here's an Angular4 example for Carbon Slider component: https://codepen.io/asudoh/pen/VryJBO

Hope it helps.

[marijohannessen]

Feel free to re-open this issue if needed.

[dessty]

Sorry for the delay in my response. Following Akira's response I was able to fix this issue.
Thank you very much!

[bdarge]

Hi @dessty
How did you solve it. Can you share?

[mradulgujar]

@bdarge i came across same issue with accordion. after following akira's response i was able to solve this.
i hope this helps:

import * as CarbonComponents from 'carbon-components';

@Component({
selector: 'my-component',
templateUrl: './myComponent.html',
styleUrls: ['./myComponent.css']
})

export class myComponent {
private accordion: CarbonComponents.Accordion;

@ViewChild('root') root: any;

ngAfterViewInit() {
if (this.accordion) {
this.accordion = this.accordion.release();
}
this.accordion = CarbonComponents.Accordion.create(this.root.nativeElement);
}

ngOnDestroy() {
if (this.accordion) {
this.accordion = this.accordion.release();
}
}