Component DOM isn't updating | angular Universal

Question

@Component({
  selector: 'mh-feature-popup',
  template: `
  <div class="full">
  <div>
    <div class="container-fluid" [@featurepop]="state">
      <div class="row">
        <div class="col-xs-12 col-md-4 col-md-offset-4 popup">
          <div class="row">
            <div id="shadow-card">
                <div class="col-xs-12 dialog-header hidden-md hidden-lg">
                    <div class="col-xs-1 skeleton hidden-md hidden-lg clickCursor" (click)="toggleState()">
                        <div class="close"></div>
                    </div>
                    <div class="text_heading col-xs-10">
                        <span *ngIf="name">{{name}}</span>
                    </div>
                </div>
                <div class="row dialog-content">
                    <div class="dialog-title skeleton col-md-10 col-md-push-1 hidden-xs hidden-sm">
                        <span *ngIf="name">{{name}}</span>
                    </div>
                    <div class="col-md-2 skeleton hidden-xs hidden-sm clickCursor" (click)="toggleState()">
                        <div class="close"></div>
                    </div>
                </div>
                <div *ngIf="data" #data_value>{{data}}
                </div>
            </div>
          </div>
        </div> 
      </div>
    </div>
  </div>
</div>
        `,
styles:[`
.full{
    background-color: rgba(0,0,0,0.2);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
`],
providers:[ ApiService ],
animations: [
  trigger('featurepop', [
    state('inactive', style({
      transform: 'scale(0)'
    })),
    state('active', style({
      transform: 'scale(1)'
    })),
    transition('inactive => active', [
      animate(250)
    ]),
    transition('active => inactive', [
      animate(250)
    ])
  ])
]
})
 export class FeaturePopUpComponent {
  state = 'inactive';
  @Input()
      data;

  @Input()
      name;

  show(a,b,c){
      this._api.get(a,b,c).subscribe(
          data => {
              this.data = {'data': a};
              this.name = {'name': b};
              console.log(this.data);
          },
          err => console.log(err),
          () => {
              this._zone.run(() => {
                  this.rend.setElementStyle(this.element.nativeElement,"display","block");
                  this.toggle();
                  console.log(this.state);
              });

          }
      );

  }

 }

This is a popup component. So it is supposed to be hidden and when the show() function is called, it is supposed to show the content received from API call.

The show() function is working but the only problem with this is that the data which I get isn't showing in the component(empty popup).

When i change the screen size of browser, the data changes on popup.

onChange() work when i change screen size but not when data change. I tried changing data as JSON objects. I tried using changeDetection.Ref and NgZone too but not working. Tried with ngDoCheck() too but isn't working.

I m using angular-universal starter kit. If anyone can make it work please make a jsfiddle or any.

Answer 1

Something like will work. I suggest you to read about @Inputs.

Also if you want to display {{name}} in html, you need just define name variable in TS, not data:{name:'aaa"}

here is link to updated plunker: https://plnkr.co/edit/owx397i2mLGBZ46oioQ1?p=preview

//our root app component
import {
  Component,
  NgModule,
  VERSION,
  ViewChild,
  forwardRef,
  Input,
  trigger,
  state,
  style,
  animate,
  transition,
  Inject,
  Renderer,
  ElementRef
} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


@Component({
  selector: 'feature-popup',
  template: `
    <div class="full">
      <div>
        <div class="container-fluid" [@featurepop]="state">
          <div class="row">
            <div class="col-xs-12 col-md-4 col-md-offset-4 popup">
              <div class="row">
                <div id="shadow-card">
                  <div class="col-xs-12 dialog-header hidden-md hidden-lg">
                    <div class="col-xs-1 skeleton hidden-md hidden-lg clickCursor" (click)="toggle()">
                      <div class="close"></div>
                    </div>
                    <div class="text_heading col-xs-10">
                      <span *ngIf="name">{{name}}</span>
                    </div>
                  </div>
                  <div class="row dialog-content">
                    <div class="dialog-title skeleton col-md-10 col-md-push-1 hidden-xs hidden-sm">
                      <span *ngIf="name">{{name}}</span>
                    </div>
                    <div class="col-md-2 skeleton hidden-xs hidden-sm clickCursor" (click)="toggle()">
                      <div class="close"></div>
                    </div>
                  </div>
                  <div *ngIf="data" #data_value>{{data}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .full {
      background-color: rgba(0, 0, 0, 0.2);
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
    }

    #shadow-card {
      background-color: white;
      height: 350px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      margin-top: 100px;
      margin-left: -200px;
    }
  `],
  providers: [],
  animations: [
    trigger('featurepop', [
      state('inactive', style({
        transform: 'scale(0)'
      })),
      state('active', style({
        transform: 'scale(1)'
      })),
      transition('inactive => active', [
        animate(250)
      ]),
      transition('active => inactive', [
        animate(250)
      ])
    ])
  ]
})
export class FeaturePopUpComponent {
  state = 'inactive';
  data;
  name;

  constructor(private element: ElementRef,
              private rend: Renderer) {
    this.rend.setElementStyle(element.nativeElement, "display", "none");
  }

  show(a, b) {
    this.data = a;
    this.name = b;
    this.rend.setElementStyle(this.element.nativeElement, "display", "block");
    this.toggle();
    console.log(this.state);

  }

  toggle() {
    this.state = (this.state === 'active' ? 'inactive' : 'active');
  }

}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 (click)="show()">Open me</h2>
      <feature-popup></feature-popup>
    </div>
  `,
})
export class App {
  @ViewChild(FeaturePopUpComponent) popup: FeaturePopUpComponent;
  a;
  b;

  constructor() {
  }

  show() {
    this.a = 'hi';
    this.b = 'hello';
    this.popup.show(this.a, this.b);
  }
}

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule],
  declarations: [App, FeaturePopUpComponent],
  bootstrap: [App]
})
export class AppModule {
}