search

nhsuk / nhsuk-frontend

NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.
https://nhsuk.github.io/nhsuk-frontend/
MIT License
616 stars 107 forks source link

Toggle Menu not working in Angular #398

Closed puravupadhyay closed 5 years ago

puravupadhyay commented 5 years ago

Bug Report

What is the issue?

I'm trying to use this library in an Angular project. I installed nhsuk-frontend via npm fine. I managed to import the styles and can see all the component rendering but I'm having problems with the javascript files. I imported all the modules like suggested but not able to make the Menu Toggle work. Can someone please help?

What steps are required to reproduce the issue?

  1. Create an Angular app, install nhsuk-frontend using NPM.
  2. Include the NHS nav header in the app.component.html
  3. Import the javascript modules in the app.component.ts
  4. Run the app, keep reducing the screen size until the Menu button appears. Click on it and nothing happens.

What was the environment where this issue occurred?

Is there anything else you think would be useful in recreating the issue?

This is the sample code of app.component.ts file:

import nhsuk_feedbackBanner from 'node_modules/nhsuk-frontend/packages/components/feedback-banner/feedback-banner';
import nhsuk_header from 'node_modules/nhsuk-frontend/packages/components/header/header';
import nhsuk_skipLink from 'node_modules/nhsuk-frontend/packages/components/skip-link/skip-link';
import autocomplete from 'node_modules/nhsuk-frontend/packages/components/header/autocomplete';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  title = 'NHSFrontEnd';

  ngOnInit() {
    nhsuk_feedbackBanner(3000);
    nhsuk_header();
    nhsuk_skipLink();
    autocomplete();
  }

}
nhs header
chrimesdev commented 5 years ago

Are there any errors in the browser console?

puravupadhyay commented 5 years ago

No errors in the console

console
chrimesdev commented 5 years ago

Haven’t used Angular in a while so I will ask around to see if anyone else has tried using it with Angular and I will see if I can replicate it.

puravupadhyay commented 5 years ago

Ok. Thanks Adam!

chrimesdev commented 5 years ago

If you are keen to get it working (whilst we investigate further) you could use the compiled nhsuk.min.js file from the node_modules folder rather than ES6 modules.

You can find instructions here: https://github.com/nhsuk/nhsuk-frontend/blob/master/docs/installation/installing-with-npm.md#option-1-include-compiled-javascript

mikemonteith commented 5 years ago

My guess would be that the header JS is trying to select the menu button before it's been rendered to the page.

Here, we are doing the select outside of the initialisation function, when it should be inside. https://github.com/nhsuk/nhsuk-frontend/blob/master/packages/components/header/header.js#L53

puravupadhyay commented 5 years ago

Just tried a bit of debugging, stepping into Header.js.

header js debugging

Also, I've pushed this project up: https://github.com/puravupadhyay/nhsuk-frontend-angular

Cheers

chrimesdev commented 5 years ago

Hi @puravupadhyay

Just to let you know, I've opened a draft pull request with a potential fix for this https://github.com/nhsuk/nhsuk-frontend/pull/402 I'm just testing it out with your Angular application (and other applications) now. Also looking at potential ways we could improve our JavaScript, so if you have any advice that would be greatly appreciated.

Thanks for raising this with us, hopefully we should get it fixed soon.

puravupadhyay commented 5 years ago

Thanks @AdamChrimes for that. I tested the changed files and they're working.

Just a thought - could use the namespaces in JavaScript - not 100% confident that it will work. Will have to play-around with it a bit, I'll try and set the project up my end. I guess this is the best place to look for guidance on that: https://github.com/nhsuk/nhsuk-frontend/tree/master/docs/contributing

Cheers

chrimesdev commented 5 years ago

Hi @puravupadhyay, we've just released version 2.0.0 of the Frontend library. With this release is the fix we mentioned above for the JavaScript variables.

I've just tested it with your Angular repo with npm install nhsuk-frontend@2.0.0 and it seems to be working. Shouldn't need to update any files just the dependency.

We're still looking at improving our JavaScript overall in the issue https://github.com/nhsuk/nhsuk-frontend/issues/408 but this should fix it in the meantime.

Thanks again for raising this issue, it will be good to keep in touch. Do you use Slack? We have a public Slack instance which may easier to share progress https://nhs-service-manual.slack.com/

puravupadhyay commented 5 years ago

@AdamChrimes The new version works! Would be great to use it in future projects.

Sure, how do I join https://nhs-service-manual.slack.com/ ? I don't think I have a Slack account.

chrimesdev commented 5 years ago

Great thanks @puravupadhyay

You will need to create an account (its free) you can sign up with your @nhs.net email address here: https://nhs-service-manual.slack.com/signup

or if you want to use another email account provider you can use this link

You can use Slack in the browser or you can download the application. Not to worry if you're not wanting to join Slack - just a useful tool for instant message and sharing quickly.

chrimesdev commented 5 years ago

Closing as this is fixed in version 2.0.0.