How to use ngx-tethys - 4 common examples

<span>有图标</span>
                    
                
            
        
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoPopoverContentComponent {}

@Component({
    selector: 'app-demo-popover-basic',
    templateUrl: './popover-basic.component.html'
})
export class DemoPopoverBasicComponent extends mixinUnsubscribe(MixinBase) implements OnInit {
    placement: ThyPlacement = 'bottom';
    trigger = 'click';

    constructor(private thyPopover: ThyPopover, private viewContainerRef: ViewContainerRef, private ngZone: NgZone) {
        super();
    }

    ngOnInit() {}

    openPopover(element: { elementRef: ElementRef }) {
        this.thyPopover.open(DemoPopoverContentComponent, {
            origin: element.elementRef,
            placement: this.placement
        });
    }

import {
    OnInit,
    Component,
    TemplateRef,
    ViewContainerRef,
    NgZone,
    ChangeDetectionStrategy,
    ElementRef
} from '@angular/core';
import { mixinUnsubscribe, MixinBase } from 'ngx-tethys/core';

@Component({
    selector: 'app-demo-skeleton-title',
    templateUrl: './skeleton-title.component.html'
})
export class DemoSkeletonTitleComponent extends mixinUnsubscribe(MixinBase) implements OnInit {
    width = 100;

    height = 10;

    ngOnInit(): void {}
}

import {
    OnInit,
    Component,
    TemplateRef,
    ViewContainerRef,
    NgZone,
    ChangeDetectionStrategy,
    ElementRef
} from '@angular/core';
import { mixinUnsubscribe, MixinBase } from 'ngx-tethys/core';

@Component({
    selector: 'app-demo-skeleton-paragraph',
    templateUrl: './skeleton-paragraph.component.html'
})
export class DemoSkeletonParagraphComponent extends mixinUnsubscribe(MixinBase) implements OnInit {
    params: {
        width?: number | string;
        height?: number | string;
        viewBoxWidth?: number | string;
        viewBoxHeight?: number | string;
        primaryColor?: string;
        secondaryColor?: string;
        preserveAspectRatio?: string;
    } = {
        width: '100%',
        height: '100%',
        primaryColor: '#f0f0f0',
        secondaryColor: '#e0e0e0',
        viewBoxWidth: 400,
        viewBoxHeight: 130,
        preserveAspectRatio: 'none'

onDragDrop(event: ThyDragDropEvent) {
        let afterId: string;
        const suiteId: string = event.previousItem.origin._id;
        const parenId: string =
            event.position === ThyDropPosition.in ? event.item.origin._id : event.item.parentNode.origin._id;
        const newIndex = event.currentIndex;
        if (newIndex === 0) {
            afterId = '';
        } else {
            afterId = event.containerItems[event.currentIndex - 1].origin._id;
        }
    }