Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' с нулевым значением в angular

Question

In angular addEventListener получает NULL

Ниже приведен код в пути ( src / assets / js /custom.js)

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');
});

HTML

<!-- main section  -->
<div class="container container text-center" id="container">
  <div class="form-container sign-up-container">
    <!-- Sign Up form code goes here -->
    <form action="#">
      <h1 class="text-center">Create Account</h1>
      <div class="social-container">
        <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
      </div>
      <span>or use your email for registration</span>
      <input type="text" class="form-control custInp" placeholder="Name" />
      <input type="email" class="form-control custInp" placeholder="Email" />
      <input type="password" class="pse" placeholder="Password" />
      <button>Sign Up</button>
    </form>
  </div>
  <div class="form-container sign-in-container">
    <!-- Sign In form code goes here -->
    <form action="#">
      <h1>Sign in</h1>
      <div class="social-container">
        <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
        <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
      </div>
      <span>or use your account</span>
      <input type="email" class="form-control custInp" placeholder="Email" />
      <input type="password" class="form-control custInp" placeholder="Password" />
      <a href="#">Forgot your password?</a>
      <button>Sign In</button>
    </form>

  </div>
  <div class="overlay-container">
    <!-- The overlay code goes here -->
    <div class="overlay">
      <div class="overlay-panel overlay-left">
        <h1>Welcome Back!</h1>
        <p>
          To keep connected with us please login with your personal info
        </p>
        <button class="ghost" id="signIn">Sign In</button>
      </div>
      <div class="overlay-panel overlay-right">
        <h1>Hello, Friend!</h1>
        <p>Enter your personal details and start journey with us</p>
        <button class="ghost" id="signUp">Sign Up</button>
      </div>
    </div>
  </div>
</div>
<!-- main section  -->

Когда я использую это код без использование angular работает нормально.

Но в angular я получаю ошибка:
Uncaught TypeError: Cannot read property 'addEventListener' of null

любезно дайте мне знать, что я делаю неправильно и как ее устранить?

Answer 1

Вместо того, чтобы вручную манипулировать DOM, используйте то, что предлагает Angular. Пусть он обрабатывает события, обрабатывает классы и т. Д. c. Все, что вам нужно сделать в TS, это объявить свойство, указывающее, активна ли панель

isRightPanelActive: boolean;

и в шаблоне

<div class="container text-center" [class.right-panel-active]="isRightPanelActive">
<!-- ... -->
<button class="ghost" id="signUp" (click)="isRightPanelActive = true">Sign Up</button>
<!-- ... -->
<button class="ghost" id="signIn" (click)="isRightPanelActive = false">Sign In</button>

Answer 2

Здесь Вы go вносите эти изменения, это будет работать, как вам нужно, добавьте ngclass для проверки условия для этого и и функцию toggleClass ()

test.component. html file

<div class="container" id="container" [ngClass]="{'right-panel-active':activeClass}">
  <div class="form-container sign-up-container">
    <form action="#">
      <h1>Create Account</h1>
      <div class="social-container">
          <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
          <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
          <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
      </div>
      <span>or use your email for registration</span>
      <input type="text" placeholder="Name" />
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <button>Sign Up</button>
  </form>
  </div>
  <div class="form-container sign-in-container">
    <form action="#">
      <h1>Sign in</h1>
      <div class="social-container">
          <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
          <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
          <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
      </div>
      <span>or use your account</span>
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <a href="#">Forgot your password?</a>
      <button>Sign In</button>
  </form>
  </div>
  <div class="overlay-container">

    <div class="overlay">
      <div class="overlay-panel overlay-left">
          <h1>Welcome Back!</h1>
          <p>
              To keep connected with us please login with your personal info
          </p>
          <button class="ghost" id="signIn" (click)="toggleClass()" >Sign In</button>
      </div>
      <div class="overlay-panel overlay-right">
          <h1>Hello, Friend!</h1>
          <p>Enter your personal details and start journey with us</p>
          <button class="ghost" id="signUp" (click)="toggleClass()" >Sign Up</button>
      </div>
  </div>
  </div>
</div>

test.component.ts file

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-double',
  templateUrl: './double.component.html',
  styleUrls: ['./double.component.css']
})
export class DoubleComponent implements OnInit {

  constructor() { }
  activeClass=false;

  ngOnInit() {
  }
  toggleClass(){
    this.activeClass=!this.activeClass
  }

}