function generateGroupOption(label: string, value: NzOptionComponent[]): NzOptionGroupComponent {
  const optionGroup = new NzOptionGroupComponent();
  const queryList = new QueryList<NzOptionComponent>();
  queryList.reset(value);
  optionGroup.listOfNzOptionComponent = queryList;
  optionGroup.nzLabel = label;
  return optionGroup;
}

    beforeEach(function() {
        multiAlertService = new MultiAlertService();

        TestBed.configureTestingModule(
            {imports: [ClrEmphasisModule], providers: [{provide: MultiAlertService, useValue: multiAlertService}]});

        alert = TestBed.createComponent(ClrAlert);
        anotherAlert = TestBed.createComponent(ClrAlert);

        queryList = new QueryList<ClrAlert>();
        queryList.reset([alert.componentInstance, anotherAlert.componentInstance]);

        multiAlertService.manage(queryList);
    });

    private highlightItem(item:CalendarItem | undefined):void {
        if (item) {
            this._renderedItems.forEach(i => i.hasFocus = false);
            const rendered = this._renderedItems.find(ri => ri.item === item);
            if (rendered && !rendered.hasFocus) {
                rendered.hasFocus = true;
                rendered.changeDetector.detectChanges();
            }

            this._highlightedItem = item;
        }
    }

	saveAll() {
		var allInputs: GenericPropertyEditorComponent[] = [];

		allInputs = allInputs.concat(
			this.audioPropertyInputs.toArray(),
			this.imagePropertyInputs.toArray(),
			this.textPropertyInputs.toArray()
		);
		allInputs.forEach((input) => {
			input.save();
		});
	}

    // Connects tab headers to tab contents, and creates a tab instance for each pairing.
    private loadTabs():void {
        // Remove any tabs that no longer have an associated header.
        this.tabs = this.tabs.filter(t => !!this._tabHeaders.find(tH => tH === t.header));

        this._tabHeaders
            // Filter out the loaded headers with attached tab instances.
            .filter(tH => !this.tabs.find(t => t.header === tH))
            .forEach(tH => {
                const content = this._tabContents.find(tC => tC.id === tH.id);

                if (!content) {
                    // Error if an associated tab content cannot be found for the given header.
                    throw new Error("A [suiTabHeader] must have a related [suiTabContent].");
                }

                // Create a new tab instance for this header & content combo.
                const tab = new Tab(tH, content);

                // Subscribe to any external changes in the tab header's active state. External changes are triggered by user input.
                tab.header.isActiveExternalChange.subscribe(() => this.onHeaderActiveChanged(tab));

                // Add the new instance to the list of tabs.
                this.tabs.push(tab);
            });

        // Assign each tab an index (which denotes the order they physically appear in).
        this._tabHeaders
            .forEach((tH, i) => {
                const tab = this.tabs.find(t => t.header === tH);
                if (tab) {
                    tab.index = i;
                }
            });

        // Sort the tabs by their index.
        this.tabs.sort((a, b) => a.index - b.index);


        if (!this.activeTab) { // Check if there are no current existing active tabs.
            // If so, we must activate the first available tab.
            this.activateFirstTab();
        } else if (!this.tabs.find(t => t === this.activeTab)) { // O'wise check if current active tab has been deleted.
            // If so, we must find the closest.
            // Use `setTimeout` as this causes a 'changed after checked' error o'wise.
            setTimeout(() => this.activateClosestTab(this.activeTab));
        }

        if (this.tabs.length === 0) {
            // Error if there aren't any tabs in the tabset.
            throw new Error("You cannot have no tabs!");
        }
    }

  ngAfterContentInit() {
    // Register the simple columns to the table
    this.simpleColumns.forEach(simpleColumn => this.table.addColumnDef(simpleColumn.columnDef));

    // Register the normal column defs to the table
    this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));

    // Register any custom row definitions to the table
    this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));

    // Register the header row definition.
    this.table.setHeaderRowDef(this.headerRowDef);
  }

 ngAfterViewInit(): void {
     this.olInstance = new ol.Map({
         layers: [],
         target: this._el.nativeElement,
         view: this._view.olInstance
     });
     this._tileLayers.forEach(item => {
         this.olInstance.addLayer(item.olInstance);
     });
     this._vectorLayers.forEach(item => {
         console.log('add vector layer');
         this.olInstance.addLayer(item.olInstance);
     });
 }

    selectTab(tab: TabComponent){
        // deactivate all tabs
        this.tabs.toArray().forEach(tab => tab.active = false);

        // activate current tab
        tab.active = true;
    }

 init() {
   this.items = this.contentItems.toArray();
   const length = this.contentItems.length;
   for (let i = 0; i < length; i++) {
     this.items[i].setParent(this);
   }
 }

 private updateContentChildren(dark: Boolean) {
     if (this.contentChildren != null && dark != undefined) {
         this.contentChildren.forEach((child, index) => {
             child.setColor(index % 2 ? dark : !dark);
         });
     }
 }