I would like to use javascript html tag in my angular project, but angular just ingnores it, what mi-CodePudding

So, I want to make an animated login/reg page with sliding effect using javascript tag in html angular, but I can not figure out why its not working. It looks like the angular just ignores the tag.

CodePudding user response：

I recommend you to do this in the html file of a component, it is not a good practice or recommendend by official docs to be manipulating DOM on your own, this because you can mess up with change detection strategies implemented by framework itself instead of addEventListener you could add a ViewChild decorator

CodePudding user response：

In your ts file:

containerClasses = ['foo', 'bar']; //initial classes

onSignUpButtonClick() {
 this.containerClasses = [
  'foo',
  'bar',
  'right-panel-active'
 ];
}

onSignInButtonClick() {
 this.containerClasses = [
  'foo',
  'bar'
 ];
}

HTML:

<div id="container" [class]="containerClasses.join(' ')">
...
</div>

<button (click)="onSignUpButtonClick()">
Sign Up
</button>

<button (click)="onSignInButtonClick()">
Sign In
</button>

But if you really want to use eventListener (not recommended)

ngOnInit(): void {
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});

signInButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
}

In both cases, you should write the scripts in the ts file.