0

I have a question about I using the Angular Animation, If I write the click event, that is work. but I using the google.maps.event click that is not working. and the global value has changed. I think the value has changed but It has not affected the animation.

My Angular Version is 5.2.0

maps.component.ts

@Component({
  selector: 'app-ngx-mw-google-maps',
  templateUrl: './ngx-mw-google-maps.component.html',
  styleUrls: ['./ngx-mw-google-maps.component.sass'],
  encapsulation: ViewEncapsulation.None,
  animations: [
    trigger('sideboxAnimation', [
      state('inactive', style({
        left: '-380px',
      })),
      state('active', style({
        left: '0',
      })),
      transition('* => *', animate('300ms ease-in-out')),
    ]),
  ]
})

export class NgxMwGoogleMapsComponent implements OnInit {
  const that = this;
  sideView = 'inactive';

  ...

  mwInitMaker() {

    ...

    google.maps.event.addListener(marker, "click", function (e) {
      that.clickSideBoxAnimate();
    }
  }

  private clickSideBoxAnimate() {
    if (this.sideView === 'inactive') {
      this.sideView = 'active';
    } else {
      this.sideView = 'inactive';
    }
    console.log(this.sideView);
  }

  animStart(event) {
    console.log(event);
  }

  animEnd(event) {
    console.log(event);
  }
}

maps.component.html

<div class="maps-wrapper">
  <div #map class="map"></div>
  <div class="mw-side" 
  [@sideboxAnimation]='sideView' 
  (@sideboxAnimation.start)="animStart($event)" 
  (@sideboxAnimation.done)="animEnd($event)">
    ...
    <div class="mws-close" (click)="clickSideBoxAnimate()">
      <i class="icon-left-open" *ngIf="sideView == 'active'"></i>
      <i class="icon-right-open" *ngIf="sideView == 'inactive'"></i>
    </div>
  </div>
</div>

The mws-close can work the animation, but the google event can't.

run on bowser

David Kross
  • 1
  • 1
  • 1
  • may be your `left` property is not working on `
    `. so try with changing `maps-wrapper` class with absolute position(position:absolute).     – Ravi Sevta Jul 21 '18 at 09:08
  • Still nothing. If I click the `mws-close` animate is work and value changed, but I used the google events, although the value had changed but animate is not working. – David Kross Jul 21 '18 at 15:19
  • I think the problem is google event listener. I copy the `mws-close` and build the click event. outside the Google event listener, it can be working, but inside the event not working, but the value still has changed. – David Kross Jul 22 '18 at 03:50

1 Answers1

0

Final, I using the detectChanges to checks the view and its children. it's work.

David Kross
  • 1
  • 1
  • 1