0

I am learning Angular and just run in a strange issue. When I set the nativeElement.style.color to red the Plot text only becomes red when I remove the img tag that is above..

Seems that it is a loading issue? But I used ngAfterViewInit() to color the Plot red..

Hope somebody can help me out :)

import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MovieService }  from '../movie-service';
import { IMovie } from '../movie';
 

@Component({
  selector: 'app-movie-detail',
  templateUrl: './movie-detail.component.html',
  styleUrls: ['./movie-detail.component.scss']
})

export class MovieDetailComponent implements OnInit, AfterViewInit {
 @Input() movie: IMovie; 
 @ViewChild('plot', {static:false}) plotRef: ElementRef;
   

 ngAfterViewInit(){
   this.plotRef.nativeElement.style.color = "red";
   
 }
  constructor(
    private route: ActivatedRoute,
    private movieService: MovieService,
  ) { }

  ngOnInit() {    
    this.getMovie();
  
  }

  getMovie(): void {
    const id = this.route.snapshot.paramMap.get('id');
     
    console.log("id1: ",id.toString);

    this.movieService.getMovie(id)
      .subscribe(movie => {
        this.movie = movie;
        this.readmore(movie.Plot);
        console.log("movieDetail = ", movie);
        console.log("id1: ",id);
      });
  }
  }
<img src={{movie.Poster}}>
<div *ngIf=movie>
    <img src={{movie.Poster}}>
    <h2 class="title">{{movie.Title}} </h2>
    <h5>Type: {{movie.Type}}</h5>
    <h5>Year: {{movie.Year}}</h5>
    <h5>Rated: {{movie.Rated}}</h5>
    <h5>Genre: {{movie.Genre}}</h5>
    <h5>Director: {{movie.Director}}</h5>
    <h5>Actors: {{movie.Actors}}</h5>
    <div>
        <h5 #plot>Plot: {{movie.Plot}}
            <p class="dots">...</p>
        </h5>
        <button id="btn-MoreLess"></button>
    </div>
</div>
JeR
  • 1
  • 4

1 Answers1

0

Because you are doing it in the AfterViewInit Lifcycle, try it with the ngOnInit Hook. Here are the available Lifecycle Hooks for a component https://angular.io/guide/lifecycle-hooks.

And styling should be done with CSS.

Moritz Vogt
  • 99
  • 1
  • 9