CODEWITHSUNDEEP
angulartypescript
micronyks
micronyks

Reputation: 55443

stop hidding element when no string to display using Angular2/Typescript

Using javascript/typescript code, I'm trying to display a string (letter by letter) which works perfectly fine. But after displaying a string completely, it hides the element so bottom element takes that space which doesn't look good. I want that space to be there forever whether it contains string or not.

You can play with it here : https://plnkr.co/edit/mbZDrlOSI1vnjIrSMcNq?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div #text1></div>
      <div>Do you really think?</div>
    </div>
  `,
})
export class App {
  @ViewChild('text1') text1:ElementRef;

  ngAfterViewInit()
  {
    this.printLetterByLetter(this.text1, "Angular2 is awesome", 200)
  }

  printLetterByLetter(destination:ElementRef, message:string, speed:number){
    let i = 0;
    destination.nativeElement.innerHTML = "";
    let interval = setInterval(()=>{
      console.log(i);
        destination.nativeElement.innerHTML += message.charAt(i);
        i++;
        if (i > message.length){
            this.printLetterByLetter(this.text1, "Angular2 is awesome", 200)
            clearInterval(interval);
        }
    }, speed);
  }
}

Upvotes: 1

Views: 46

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657957

Set a height for the element

<div #text1 [style.height.em]="1"></div>

Plunker example

Upvotes: 3

eko
eko

Reputation: 40677

A couple of ways that come to my mind is:

You can give a min-height style:

<div style="min-height: 18px" #text1></div>

Plunker: https://plnkr.co/edit/LR2m8TymNBeExwG0pDq2?p=preview

Or initialize the string with an empty string ""

Upvotes: 1

Related Questions