Using the Design System in an Angular Typescript project

Solutions General
1

Hi all, I’m setting up a project using the latest version of Angular, I have installed the Design System using npm and all the html and css work great but it can’t use the javascript library as imported from a script tag,

Wondered if anyone had experience including the JS library in an Angular project or if there’s a TypeScript version. Read a few StackOverflow answers but haven’t managed to get any of their import methods working yet.

1 Like
2

Hi @Gburnett we managed to convert the NSW DS components to React. Although it’s not the best approach, we’ve done this by initialising the component JS inside the lifecycle hook componentDidMount, in your case it will be on ngOnInit.

Have a look the React components here for tabs and main navigation components

And here’s how you can initialise each of the components.

1 Like
3

Hi @Gburnett,

I’ve just implemented this in my solution about 5 minutes ago.

Let me know if you still need help.

1 Like
4

Hi @angus did you do it in Angular? Would be a great help if you did and can give me some steps.

The React method looks like it will work but requires some rewrites to convert React functionality within the js files to Angular.

5

Assuming you already have reference to js file in html and you are using routing.

In the AppComponent class.

  constructor(private router: Router) {
    this.router.events.subscribe({
      next: (event: any) => {
        if (event instanceof NavigationEnd) {
          this.initNswDesignPoll();
        }
      }
    });
  }

  initNswDesignPoll(): void {
    eval(`
      let stateCheck = setInterval(() => {
        if (document.readyState === 'complete') {
          clearInterval(stateCheck);
          // document ready
          window.NSW.initSite();
        }
      }, 100);
    `);
  }

I attempted to tap into the document.onreadystatechange and add events using document.addEventListener, but neither would execute consistently, particularly on route changes.

I have also attempted different combinations of calling window.NSW.initSite(), or using the aforementioned dom events, from within the AppComponent’s lifecycle hooks ngOnInit(), ngAfterViewInit(), and ngAfterViewChecked() but for various reasons, the initSite() method was either called too early, mid way through rendering/dom manipulation, too late, multiple times, or not at all.

This solution is working for me on any navigation/refresh and any route changes.

I will be investigating more elegant solutions, such as moving this logic to a router interceptor (like canActivate), but this works for now.

Note: I have not yet attempted to add any nsw design elements to the page dynamically (e.g. clicking an a button that adds an accordian element) that require the javascript init.

1 Like
6

Perfect @angus this worked for me and I do have an accordion and mega menu implemented and can confirm they’re working too. Very happy to use this for now and great to go into the Easter weekend with this problem solved :partying_face:

Thanks for the suggestion too @benjamin , much appreciated!

1 Like