How to use primeng - 10 common examples

switch (event.toState) {
            case 'visible':
                this.overlay = event.element;
                let itemsWrapperSelector = this.virtualScroll ? '.cdk-virtual-scroll-viewport' : '.ui-dropdown-items-wrapper';
                this.itemsWrapper = DomHandler.findSingle(this.overlay, itemsWrapperSelector);
                this.appendOverlay();
                if (this.autoZIndex) {
                    this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
                }
                this.alignOverlay();
                this.bindDocumentClickListener();
                this.bindDocumentResizeListener();

                if (this.options && this.options.length) {
                    if(!this.virtualScroll) {
                        let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '.ui-dropdown-item.ui-state-highlight');
                        if (selectedListItem) {
                            DomHandler.scrollInView(this.itemsWrapper, selectedListItem);
                        }
                    }
                }

                if (this.filterViewChild && this.filterViewChild.nativeElement) {
                    this.filterViewChild.nativeElement.focus();
                }

                this.onShow.emit(event);
            break;

            case 'void':
                this.onOverlayHide();
            break;

ngAfterViewInit() {
        this.container = this.el.nativeElement.children[0];
        this.panelWrapper = DomHandler.findSingle(this.el.nativeElement, 'ul.ui-galleria-panel-wrapper');
        this.initialized = true;
        
        if(this.showFilmstrip) {
            this.stripWrapper = DomHandler.findSingle(this.container,'div.ui-galleria-filmstrip-wrapper');
            this.strip = DomHandler.findSingle(this.stripWrapper,'ul.ui-galleria-filmstrip');
        }
        
        if(this.images && this.images.length) {
            this.render();
        } 
    }

ngAfterViewInit() {
        this.container = this.el.nativeElement.children[0];
        this.panelWrapper = DomHandler.findSingle(this.el.nativeElement, 'ul.ui-galleria-panel-wrapper');
        this.initialized = true;
        
        if(this.showFilmstrip) {
            this.stripWrapper = DomHandler.findSingle(this.container,'div.ui-galleria-filmstrip-wrapper');
            this.strip = DomHandler.findSingle(this.stripWrapper,'ul.ui-galleria-filmstrip');
        }
        
        if(this.images && this.images.length) {
            this.render();
        } 
    }

ngAfterViewInit() {
        this.container = this.el.nativeElement.children[0];
        this.panelWrapper = DomHandler.findSingle(this.el.nativeElement, 'ul.ui-galleria-panel-wrapper');
        this.initialized = true;
        
        if(this.showFilmstrip) {
            this.stripWrapper = DomHandler.findSingle(this.container,'div.ui-galleria-filmstrip-wrapper');
            this.strip = DomHandler.findSingle(this.stripWrapper,'ul.ui-galleria-filmstrip');
        }
        
        if(this.images && this.images.length) {
            this.render();
        } 
    }

newPanel = this.panels[index];
            
            DomHandler.fadeIn(newPanel, this.effectDuration);
            
            if(this.showFilmstrip) {
                let oldFrame = this.frames[this.activeIndex],
                newFrame = this.frames[index];
                
                if(reposition === undefined || reposition === true) {
                    let frameLeft = newFrame.offsetLeft,
                    stepFactor = this.frameWidth + parseInt(getComputedStyle(newFrame)['margin-right'], 10),
                    stripLeft = this.strip.offsetLeft,
                    frameViewportLeft = frameLeft + stripLeft,
                    frameViewportRight = frameViewportLeft + this.frameWidth;
                    
                    if(frameViewportRight > DomHandler.width(this.stripWrapper))
                        this.stripLeft -= stepFactor;
                    else if(frameViewportLeft < 0)
                        this.stripLeft += stepFactor;
                }
            }
            
            this.activeIndex = index;

            this.onImageChange.emit({index: index});
        }
    }

activateFilter() {
        let searchFields: string[] = this.filterBy.split(',');
        
        if (this.options && this.options.length) {
            if (this.group) {
                let filteredGroups = [];
                for (let optgroup of this.options) {
                    let filteredSubOptions = FilterUtils.filter(optgroup.items, searchFields, this.filterValue, this.filterMatchMode);
                    if (filteredSubOptions && filteredSubOptions.length) {
                        filteredGroups.push({
                            label: optgroup.label,
                            value: optgroup.value,
                            items: filteredSubOptions
                        });
                    }
                }

                this.optionsToDisplay = filteredGroups;
            }
            else {
                this.optionsToDisplay = FilterUtils.filter(this.options, searchFields, this.filterValue, this.filterMatchMode);
            }

            this.optionsChanged = true;

render() {
        this.panels = DomHandler.find(this.panelWrapper, 'li.ui-galleria-panel'); 
        
        if(this.showFilmstrip) {
            this.frames = DomHandler.find(this.strip,'li.ui-galleria-frame');
            this.stripWrapper.style.width = DomHandler.width(this.panelWrapper) - 50 + 'px';
            this.stripWrapper.style.height = this.frameHeight + 'px';
        }
        
        if(this.showCaption) {
            this.caption = DomHandler.findSingle(this.container,'div.ui-galleria-caption');
            this.caption.style.bottom = this.showFilmstrip ? DomHandler.getOuterHeight(this.stripWrapper,true) + 'px' : 0 + 'px';
            this.caption.style.width = DomHandler.width(this.panelWrapper) + 'px';
        }
   
        if(this.autoPlay) {
            this.startSlideshow();
        }
        
        this.container.style.visibility = 'visible';
    }

this.alignOverlay();
                }, 1);
            });
        }
        
        if (this.selectedOptionUpdated && this.itemsWrapper) {
            if (this.virtualScroll && this.viewPort) {
                let range = this.viewPort.getRenderedRange();
                this.updateVirtualScrollSelectedIndex(false);

                if (range.start > this.virtualScrollSelectedIndex || range.end < this.virtualScrollSelectedIndex) {
                    this.viewPort.scrollToIndex(this.virtualScrollSelectedIndex);
                }
            }
            
            let selectedItem = DomHandler.findSingle(this.overlay, 'li.ui-state-highlight');
            if (selectedItem) {
                DomHandler.scrollInView(this.itemsWrapper, DomHandler.findSingle(this.overlay, 'li.ui-state-highlight'));
            }
            this.selectedOptionUpdated = false;
        }
    }

onAnimationStart(event: AnimationEvent) {
        switch(event.toState) {
            case 'visible':
                this.container = event.element;
                this.setDimensions();
                this.contentContainer = DomHandler.findSingle(this.container, '.ui-dialog-content');
                
                if (this.acceptVisible || this.rejectVisible) {
                    DomHandler.findSingle(this.container, 'button').focus();
                }

                this.appendContainer();
                this.moveOnTop();
                this.bindGlobalListeners();
                this.enableModality();
            break;

            case 'void':
                this.onOverlayHide();
            break;
        }
    }

applyFocus(): void {
        if (this.editable)
            DomHandler.findSingle(this.el.nativeElement, '.ui-dropdown-label.ui-inputtext').focus();
        else
            DomHandler.findSingle(this.el.nativeElement, 'input[readonly]').focus();
    }