How to add BookBlock PlugIn into Angular (Angular 2)

Question

I have trouble to make BookBlock plugin work in Angular. It seems that the BookBlock object was created in function "ngAfterViewInit" is too early and the DOM is still not ready for use.

Here is the component code:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Skill } from './skill';
import { SkillService } from './skill.service';

declare var BookBlock: any;
@Component({
moduleId: module.id,
selector: 'skill-list',
templateUrl: './template/skill-list.component.html',
styles: ['.skills {list-style-type: none;}', '*.skills li {padding: 
4px;cursor: pointer;}']
})
export class SkillListComponent implements OnInit {
skills: Observable<Skill[]>;
bbArea: HTMLElement;
bookBlock: any;
constructor(private skillService: SkillService) {}

ngOnInit() {
    this.skills = this.skillService.getSkills();
}

ngAfterViewInit() {

    this.bbArea = document.getElementById("blockbook");
    this.bookBlock = new BookBlock(this.bbArea, {
        speed: 500,
        shadowSides: 0.8,
        shadowFlip: 0.7
    });

}

}

here is the view:

<article>
<h4>My Skills</h4>
<div class="bb-custom-wrapper">
    <div id="blockbook" class="bb-bookblock" >
        <div *ngFor="let skill of skills | async" class="bb-item">
            <a href="" [routerLink]="['/skills', skill.id]">
                {{skill.id}}. {{skill.name}}
            </a>
        </div>
    </div>
</div>
</article>

here is the error:

core.umd.js:1091 ERROR Error: Uncaught (in promise): TypeError: Cannot read 
property 'style' of undefined
TypeError: Cannot read property 'style' of undefined
at BookBlock._init (bookblock.js:111)
at new BookBlock (bookblock.js:47)
at SkillListComponent.ngAfterViewInit (skill-list.component.ts:26)

The actual error line is this:

 ...
      // previous item´s index
               this.previous = -1;
               // show first item
                  this.current = this.items[this.currentIdx];
               ***this.current.style.display = 'block';***
               // get width of this.el
               // this will be necessary to create the flipping layout
               this.elWidth = this.el.offsetWidth;
               var transEndEventNames = {
                   'WebkitTransition': 'webkitTransitionEnd',
                   'MozTransition': 'transitionend',
      ...

Let me know if you need further information. Thanks!

Answer 1

I just managed to finish it. Here is repo with simple angular 5 app and jquery bookblock plugin + with ngFor loop and http request simulating (setTimeout)

https://bitbucket.org/tomson234/bookblock_angular/src/master/

key steps:

angular-cli.json

  "styles": [
    "styles.css",
    "css/default.css",
    "css/bookblock.css",
    "css/demo4.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "./js/modernizr.custom.js",
    "./js/jquerypp.custom.min.js",
    "./js/jquery.bookblock.min.js"
  ],

app.component.html:

<div class="container">
<div class="bb-custom-wrapper">

    <div id="bb-bookblock" class="bb-bookblock">
      <div class="bb-item" *ngFor="let item of list">
        <div class="bb-custom-firstpage">
          <h1>{{item}}</h1>
        </div>
        <div class="bb-custom-side">
          <p>Pastry bear claw oat cake danish croissant jujubes danish. Wypas soufflé muffin. Liquorice powder pastry
            danish. Candy toffee gummi bears chocolate bar lollipop applicake chocolate cake danish brownie.</p>
        </div>
      </div>
    </div>

    <nav>
      <a id="bb-nav-first" href="#" class="bb-custom-icon">First page</a>
      <a id="bb-nav-prev" href="#" class="bb-custom-icon">Previous</a>
      <a id="bb-nav-next" href="#" class="bb-custom-icon">Next</a>
      <a id="bb-nav-last" href="#" class="bb-custom-icon">Last page</a>
    </nav>

  </div>

</div><!-- /container -->

app.component.ts

import { Component, OnInit } from '@angular/core';
declare var $ :any;

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

  list:string[] = [];

  ngOnInit(): void {

    //simulating http request
    setTimeout(() => {
      this.list = ["asf", "vzxca", "fasdf"];
      setTimeout(() => { this.initBookBlock() }, 1000);
    }, 1000);
  }

  private initBookBlock(): void {
    var Page = (function() {      
      var config = {
 ...