Skip to content
Advertisement

convert js into typescript into angular 8

Below code is working fine in javascript. But when i tried the same in Angular 8 I am getting lot of error

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.remove('right-panel-active');
});
}

Errors signUpButton.addEventListener(‘click’, () => { ~ error TS1003: Identifier expected.

    69 signUpButton.addEventListener('click', () => {
                                         ~~~~~~~
    Parameter declaration expected.

    69 signUpButton.addEventListener('click', () => {
                                                ~
    Parameter declaration expected.

    69 signUpButton.addEventListener('click', () => {
                                                  ~
    error TS1005: ';' expected.

    71 });
            ~
    error TS1128: Declaration or statement expected.

please let me know how to convert this into Typescript

Advertisement

Answer

In Angular, It’s better to not use eventListeners rather use event binding in your HTML code.

Your HTML will look something like :

<input type="button" name="" id="signUp" (click)="signUp()">
<input type="button" name="" id="signIn" (click)="signIn()">

and in TS file :

signUp() {
    const container = document.getElementById('container');
    container.classList.add('right-panel-active');
}

signIn() {
    const container = document.getElementById('container');
    container.classList.remove('right-panel-active');
}

Read more on –> https://angular.io/guide/event-binding

Advertisement