CODEWITHSUNDEEP
javascriptarraysangularif-statementconditional-statements
Bogdan
Bogdan

Reputation: 3

How to create a condition to hide and show a video in Angular?

In our homepage we have a video presentation. I would like to know know how to replicate this video in every product page which contains a video, if the product hasn't a video the video should be hidden.

Upvotes: 0

Views: 479

Answers (2)

pooja
pooja

Reputation: 81

To Create an condition you can use the *ngIf directive and provide your condition in your HTML page. Here I have provided a sample code for your reference

HTML:

<div class="container" style="max-width: 550px">
    <h2 class="text-center mb-5">Angular Login with Google</h2>
  
    <div *ngIf="isVideo === false">
      <p>No Video found</p>
    </div>
  
    <div *ngIf="isVideo === true">
      <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
     </video>
  </div>

Method in component.ts:

ngOnInit(): void {
  this.Service.getvideos.subscribe((videoid) => {
      this.isVideo = (videoid != null);
      
    });
  }

Upvotes: 0

omidfarzadian
omidfarzadian

Reputation: 106

You can use the *ngIf statement on the container of your video with the condition of if the product has a video.

Upvotes: 1

Related Questions