@hicoder/angular-cli/templates/widgets/list-view/message/message.component.ts

Angular UI componenets and service generator. It works with the mean-rest-express package to generate the end to end web application. The input to this generator is the Mongoose schema defined for the express application. mean-rest-express exposes the Res

import { Component, OnInit, AfterViewInit, Input, SimpleChanges } from '@angular/core';
import { tns, TinySliderInstance } from 'tiny-slider';

import { <%-SchemaName%>ListViewComponent } from './<%-schemaName%>-list-view.component';

@Component({
  <%- include(`/widgets/list-view/component.template.custom.ts`)%>
})
export class <%-SchemaName%><%-ComponentClassName%>Component extends <%-SchemaName%>ListViewComponent
implements OnInit, AfterViewInit {
  public fields: any = {<% for (let field of briefView) {%><%
    if (field.messageSender) {%>
  sender: '<%-field.fieldName%>',<%
    }%><%
    if (field.messageSenderTitle) {%>
  senderTitle: '<%-field.fieldName%>',<%
    }%><%
    if (field.messageTime) {%>
  time: '<%-field.fieldName%>',<%
    }%><%
    if (field.messageContent) {%>
  content: '<%-field.fieldName%>',<%
    }%><%
  }%>
  };

  private slider?: TinySliderInstance;

  constructor() {
    super();
  }

  override ngOnInit() {
    super.ngOnInit();
  }

  override ngAfterViewInit(): void {
    super.ngAfterViewInit();
    this.slider = tns({
      container: '#<%-schemaName%>-messages',

      items: 1,
      slideBy: 1, // 'page',
      gutter: 20,
      speed: 5000,

      nav: false,
      controls: false,
      autoplayButton: false,
      autoplay: true,
      autoplayButtonOutput: false,
      autoplayTimeout: 8000,

      responsive: {
        768: {
          items: 2,
          speed: 6000,
          autoplayTimeout: 10000,
        },
        1140: {
          items: 3,
          speed: 8000,
          autoplayTimeout: 12000,
        }
      },
    });
  }
}