How to use @covalent/core - 10 common examples

{ name: 'participants', label: 'Spieler' },
    { name: 'edit', label: '' }
  ];

  swalOptionsConfirmDelete: {}
  swalOptionsDeleteSuccess: {}
  // Sort / Filter / Paginate variables
  filteredData: any[] = this.data;
  filteredTotal: number = this.data.length;
  searchTerm = '';
  fromRow = 1;
  currentPage = 1;
  pageSize = 5;
  sortBy = 'title';
  selectedRows: any[] = [];
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;

  constructor(
    private questService: QuestService,
    private taskService: TaskService,
    private worldService: WorldService,
    private _dataTableService: TdDataTableService,
    private translateService: TranslateService,
    private dialog: MatDialog) {
      this.initSweetAlert();
  }

  ngOnInit() {
    this.translateTable();
    this.init();
    this.worldService.onWorldChange().subscribe(() => this.init());
    this.initSweetAlert();

{name: 'xp', label: 'XP'},
    {name: 'story', label: 'Story'},
    {name: 'status', label: 'Status'},
    {name: 'edit', label: '', width: 70}
  ]

  // Sort / Filter / Paginate variables
  filteredData: any[] = this.data
  filteredTotal: number = this.data.length
  searchTerm = '';
  fromRow = 1;
  currentPage = 1;
  pageSize = 5;
  sortBy = 'title';
  selectedRows: any[] = [];
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;
  freeQuestsAvailable: boolean;

  constructor(private _dataTableService: TdDataTableService,
              private questService: QuestService,
              private worldService: WorldService,
              private translateService: TranslateService,
              private dialog: MatDialog,
              private taskService: TaskService,
              private adventureService: AdventureService) {
  }

  ngOnInit() {
    this.translateTable();
    this.init();
    this.worldService.onWorldChange().subscribe(() => this.init());
  }

{name: 'name', label: 'Name', width: {min: 80}},
    {name: 'type', label: 'Type', width: {min: 40}},
    {name: 'value', label: 'Value', width: {min: 40}},
    {name: 'action', label: ''}
  ];

  // Sort / Filter / Paginate variables
  filteredSkills: Skill[];
  filteredTotal: number
  searchTerm = '';
  fromRow = 1;
  currentPage = 1;
  pageSize = 5;
  sortBy = 'name';
  selectedRows: any[] = [];
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;

  constructor(
    private dialogRef: MatDialogRef,
    private dialog: MatDialog,
    private artefactService: ArtefactService,
    private skillService: SkillService,
    @Inject(MAT_DIALOG_DATA) public artefact: Artefact,
    private _dataTableService: TdDataTableService  ) {
  }

  ngOnInit() {
    this.skillService.getSkillsForArtefact(this.artefact).then(skills => {
      this.skills = skills;
      this.filter();
    });
    this.name = this.artefact.name;

{name: 'name', label: 'Name', width: {min: 80}},
    {name: 'type', label: 'Type', width: {min: 40}},
    {name: 'value', label: 'Value', width: {min: 40}},
    {name: 'action', label: ''}
  ];

  // Sort / Filter / Paginate variables
  filteredSkills: Skill[];
  filteredTotal: number
  searchTerm = '';
  fromRow = 1;
  currentPage = 1;
  pageSize = 5;
  sortBy = 'name';
  selectedRows: any[] = [];
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;

  constructor(
    private dialogRef: MatDialogRef,
    private artefactService: ArtefactService,
    private dialog: MatDialog,
    private skillService: SkillService,
    private _dataTableService: TdDataTableService) {
  }

  ngOnInit() {
    this.filter()
  }

  removeSkill(skill: Skill) {
    if (typeof skill.id !== 'undefined') {
      this.skillService.deleteSkill(skill).then();

{name: 'message', label: 'Mission'},
    {name: 'quest.title', label: 'Quest'},
    {name: 'status', label: 'Status'},
    {name: 'edit', label: ''}
  ];

  // Sort / Filter / Paginate variables
  filteredData: any[] = this.data;
  filteredTotal: number = this.data.length;
  searchTerm = '';
  fromRow = 1;
  currentPage = 1;
  pageSize = 5;
  sortBy = 'id';
  selectedRows: any[] = [];
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;

  constructor(
    private specialTaskService: SpecialTaskService,
    private questService: QuestService,
    private adventureService: AdventureService,
    private _dataTableService: TdDataTableService,
    private worldService: WorldService,
    private translateService: TranslateService,
    private dialog: MatDialog) {
  }

  ngOnInit() {
    this.translateTable();
    this.worldService.currentWorld$.subscribe(world => {
      this.currentWorld = world
      this.loadTasks();

{ name: 'project', label: 'Project', width: { min: 300 } },
    { name: 'active', label: 'Active' },
    { name: 'usequestcards', label: 'Questcards' },
    { name: 'edit', label: '' }
  ];

  // Sort / Filter / Paginate variables
  filteredData: any[];
  filteredTotal: number;
  searchTerm = '';
  fromRow = 1;
  currentPage = 1;
  pageSize = 5;
  sortBy = 'id';
  selectedRows: any[];
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;

  constructor(private worldService: WorldService,
    private _dataTableService: TdDataTableService,
    private translateService: TranslateService,
    private dialog: MatDialog,
    private loadingService: LoadingService,
    private userService: UserService) {
  }

  ngOnInit() {
    this.translateTable();

    this.userService.user$.subscribe(user => {
      this.user = user
      if (this.user.role.name.toLocaleUpperCase() === 'ADMIN') {
        this.loadWorlds();

{name: 'severity', label: 'Severity'},
    {name: 'quest.title', label: 'Quest'},
    {name: 'status', label: 'Status'},
    {name: 'edit', label: ''}
  ];

  // Sort / Filter / Paginate variables
  filteredData: any[] = this.data;
  filteredTotal: number = this.data.length;
  searchTerm = '';
  fromRow = 1;
  currentPage = 1;
  pageSize = 5;
  sortBy = 'id';
  selectedRows: any[] = [];
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;

  currentWorld: World;

  constructor(
    private standardTaskService: StandardTaskService,
    private taskService: TaskService,
    private questService: QuestService,
    private adventureService: AdventureService,
    private _dataTableService: TdDataTableService,
    private worldService: WorldService,
    private translateService: TranslateService,
    private dialog: MatDialog,
    private loadingService: LoadingService) {
  }

  ngOnInit() {

ngOnInit() {

        // Create state loading bar
        this.loadingService.create({
            name: STATE_LOADER,
            mode: LoadingMode.Indeterminate,
            type: LoadingType.Linear,
            color: "accent"
        });

        // Listen for state transitions
        this.transitions.onCreate({}, this.onTransitionStart.bind(this));
        this.transitions.onSuccess({}, this.onTransitionSuccess.bind(this));
        this.transitions.onError({}, this.onTransitionError.bind(this));

        // Fetch the allowed actions
        this.accessControlService.getUserAllowedActions()
            .then((actionSet: any)=> {
                this.allowSearch = this.accessControlService
                                        .hasAction(AccessConstants.GLOBAL_SEARCH_ACCESS,
                                                    actionSet.actions);
            });

ngOnInit() {

        // Create state loading bar
        this.loadingService.create({
            name: STATE_LOADER,
            mode: LoadingMode.Indeterminate,
            type: LoadingType.Linear,
            color: "accent"
        });

        // Listen for state transitions
        this.transitions.onCreate({}, this.onTransitionStart.bind(this));
        this.transitions.onSuccess({}, this.onTransitionSuccess.bind(this));
        this.transitions.onError({}, this.onTransitionError.bind(this));

        // Fetch the allowed actions
        this.accessControlService.getUserAllowedActions()
            .then((actionSet: any)=> {
                this.allowSearch = this.accessControlService
                                        .hasAction(AccessConstants.GLOBAL_SEARCH_ACCESS,
                                                    actionSet.actions);
            });

beforeEach(function () {
        nfRegistryService = new NfRegistryService();
        // setup the nfRegistryService
        nfRegistryService.user = {identifier: 3, identity: 'User 3', userGroups: []};
        nfRegistryService.groups = [{identifier: 1, identity: 'Group 1', configurable: true, checked: true, users: []}];

        nfRegistryApi = new NfRegistryApi();
        snackBarService = new fdsSnackBarsModule.FdsSnackBarService();
        dataTableService = new covalentCore.TdDataTableService();
        comp = new NfRegistryAddUserToGroups(nfRegistryApi, dataTableService, nfRegistryService, {
            close: function () {
            }
        }, snackBarService, {user: nfRegistryService.user});

        // Spy
        spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
        }).and.returnValue(rxjs.Observable.of({identifier: 1, identity: 'Group 1'}));
        spyOn(nfRegistryApi, 'updateUserGroup').and.callFake(function () {
        }).and.returnValue(rxjs.Observable.of({identifier: 1, identity: 'Group 1'}));
        spyOn(comp.dialogRef, 'close');
        spyOn(comp.snackBarService, 'openCoaster');
        spyOn(comp, 'filterGroups').and.callThrough();

        // initialize the component
        comp.ngOnInit();