Displaying and concealing a subcomponent within a parent element for a set duration of time

Question

Displaying and concealing a subcomponent within a parent element for a set duration of time

I have a notification component that is displayed as a child component in the parent component after a button click. It automatically hides after a certain number of seconds. Here is the code I have developed:

MyCode

Parent component:

<button (click)="handleClick()">Initiate Message</button>

<app-notification [message]="message" [duration]="3000" [show]="show"></app-notification>

<app-notification [message]="message" [duration]="6000" [show]="show"></app-notification>

export class AppComponent  {
   message:string;
   show:boolean;


  handleClick(){
    this.message = 'Good Morning';
    this.show=true;
  }
}

Child component:

<div class="container" *ngIf="show">
  {{ message }}
</div>

 @Input() message: string;
  @Input() duration: number;
  @Input() show = false;

  constructor() {}

  ngOnChanges(changes: SimpleChanges) {
    console.log(this.show)
    setTimeout(()=>{
      this.show = false;
      console.log(3)
    }, this.duration)
  }

The functionality works well, but I am facing an issue where if the initial notification has not finished hiding after 3 seconds and I click the button again, the new notification does not display. Can someone help me identify what I am doing wrong? I am still learning Angular.

Additionally, I would like to achieve the same behavior for both instances of the child component.

javascript html css angular typescript

Answer 1

Answer №1

To fix the issue, you need to restructure your code by moving the timeout functionality outside of the ngOnChanges method. Utilizing a setter in your component setup can achieve this.

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.css'],
})
export class NotificationComponent {
  @Input() message: string;
  @Input() duration: number;
  @Input() set show(value: boolean) {
    this._show = value;
    // Implement a failsafe mechanism if expected values are not set
    if (value && this.duration) {
      this._show = true;
      setTimeout(() => {
        this._show = false;
      }, this.duration);
    }
  }
  get show(): boolean {
    return this._show;
  }

  private _show = false;
}

An alternative workaround is presented below, although it may not be the most elegant solution:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  message: string;
  show: boolean;
  duration: number;

  handleClick() {
    this.message = 'Good Morning';
    this.show = true;
    setTimeout(() => (this.show = false), 1);
  }
}

Implementing RxJS Observables could provide a cleaner solution, but it might be more complex for newcomers to Angular.

Answer 2

To fix the issue, you need to restructure your code by moving the timeout functionality outside of the ngOnChanges method. Utilizing a setter in your component setup can achieve this.

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.css'],
})
export class NotificationComponent {
  @Input() message: string;
  @Input() duration: number;
  @Input() set show(value: boolean) {
    this._show = value;
    // Implement a failsafe mechanism if expected values are not set
    if (value && this.duration) {
      this._show = true;
      setTimeout(() => {
        this._show = false;
      }, this.duration);
    }
  }
  get show(): boolean {
    return this._show;
  }

  private _show = false;
}

An alternative workaround is presented below, although it may not be the most elegant solution:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  message: string;
  show: boolean;
  duration: number;

  handleClick() {
    this.message = 'Good Morning';
    this.show = true;
    setTimeout(() => (this.show = false), 1);
  }
}

Implementing RxJS Observables could provide a cleaner solution, but it might be more complex for newcomers to Angular.

Displaying and concealing a subcomponent within a parent element for a set duration of time

Answer №1

Similar questions

Struggling to retrieve Json data through Ajax in Rails 5

Steps to initiate a PDF file download when a button is clicked using Angular 6

MongoDB Node.js throws a RangeError when trying to push a message that exceeds the maximum call stack size

Stop the span within the paragraph from breaking onto a new line

The elusive axios was nowhere to be found, not in the project itself nor in any of the directories, including

What is the best method for swapping out Angular2 Http for uploading files?

There was an error caught: the object is not a function, specifically the button inside a form

When using Node.js, React.js does not recognize raw HTML strings as valid HTML elements

What are the steps to develop an ElectronJS application that displays "Hello world!" in the console after a button click?

Hiding a HubSpot form is made easy with the utilization of vue.js and its

Running multiple instances of setTimeout() in JQuery

Looking for a way to choose a button with a specific class name and a distinct "name" attribute using jquery?

Trouble with the navbar collapse functionality in Bootstrap

I need the links to open up the content area on the website in HTML

What is the optimal method for showcasing functions in NodeJS?

What is the process for reversing the bubble order of elements in JavaScript?

Transferring information from one website to another

Guidelines for positioning social media icons to the right of the collapsible navigation bar in Bootstrap 3

Exploring the wonders of array filtering and reducing in Javascript

Capturing Screenshots with Ionic Framework