@angular/core#QueryList TypeScript Examples

ngAfterViewInit()
    {
        if (!isPlatformBrowser(this.platformId))
            return;
            
        this.splide = new Splide(this.splideElement.nativeElement, this.options);
        if (this.syncWith) {
            this.splide.sync(this.syncWith.getSplideInstance());
        }

        this.onInit.emit(this.splide);
        this.addEventListeners();
        this.splide.mount();

        const slidesSubscription = this.slides.changes
            .subscribe((list: QueryList<NgxSplideSlideComponent>) => {
                this.cdr.detectChanges();

                setTimeout(() => {
                    this.splide.destroy();
                    this.splide.mount();

                    this.addEventListeners();
                });
            })
        ;

        this.cdr.detectChanges();
    }

ngAfterContentInit() {
    const containerEl = this.containerEl;
    this.anchorPortal = new ComponentPortal(AnchorComponent);
    const portalOutlet = new DomPortalOutlet(
      document.body,
      this.cfr,
      this.appRef,
      this.injector,
    );
    const anchorComponentRef = this.anchorPortal.attach(portalOutlet);
    const anchorEl = anchorComponentRef.injector.get(ElementRef)
      .nativeElement as HTMLElement;

    requestAnimationFrame(() =>
      this.adaptAnchorPosition(containerEl, anchorEl),
    );

    this.anchorLabels.changes
      .pipe(startWith(this.anchorLabels), takeUntil(this.destroy$$))
      .subscribe((anchorLabels: QueryList<AnchorLabelDirective>) => {
        Object.assign(anchorComponentRef.instance, {
          items: anchorLabels.toArray(),
        });
      });
  }

public ngAfterViewInit() {
    this.generateTabs();
    this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
    this.insertUnderline();
    this.cdRef.detectChanges();
    this.setEventListeners();
    this.cdRef.detectChanges();

    this.tabs.changes.subscribe((value) => {
      const matTabsFromQueryList = value.map((tab, index) => {
        if (tab.label && tab.iconSrc) {
          this.allTabWithLabelAndIcon = true;
        }
        tab.id = index;
        return tab.matTab;
      });
      const list = new QueryList<MatTab>();
      list.reset([matTabsFromQueryList]);
      this.tabGroup._tabs = list;
      this.setActiveTab();
      this.cdRef.detectChanges();
    });
  }

/* Set applyToAllFilters for new panel when it's created */
    public ngAfterViewInit(): void {

        this.edaPanelsSubscription = this.edaPanels.changes.subscribe((comps: QueryList<EdaBlankPanelComponent>) => {
            const globalFilters = this.filtersList.filter(filter => filter.isGlobal === true);
            const unsetPanels = this.edaPanels.filter(panel => panel.panel.content === undefined);
            setTimeout(() => {
                unsetPanels.forEach(panel => {
                    globalFilters.forEach(filter => {
                        filter.panelList.push(panel.panel.id);
                        panel.setGlobalFilter(this.formatFilter(filter))
                    });
                });
            }, 0);
        });
    }

private loadIndex(): void {
    this.http.get('/static/docs.json').subscribe((routes: DocsIndex) => {
      this.initNav(routes);

      // open the panel corresponding to the currentUrl
      this.panels.changes.subscribe((panels: QueryList<MatExpansionPanel>) => {
        panels.map((panel, i) => {
          const el = this.elements.get(i);
          const attr = el.nativeElement.getAttribute('route');
          if (`/${this.currentUrl}`.includes(attr)) {
            panel.open();
          }
        });
      });

      // wait until the nav is loaded to load the page
      this.nav.pipe(
        filter(nav => Boolean(nav.length)),
        switchMap(() => this.route.url),
      ).subscribe((segments) => {
        // search the requested URL in the index
        this.currentUrl = segments.map(({ path }) => path).join('/');

        this.metadata = routes[`/${this.currentUrl}`];

        if (!this.metadata) {
          if (this.response) {
            this.response.statusCode = 404;
            this.response.statusMessage = 'Page Not Found';
          }
          this.router.navigateByUrl('/404');
        } else if (this.metadata?.redirectTo) {
          this.router.navigateByUrl(this.metadata.redirectTo);
        }
      });
    });
  }

@ViewChildren('dropdownOptionTemplate') dropdownOptionsTemplates: QueryList<TemplateRef<unknown>>;

@ViewChildren('codeEditors')
  private codeEditors: QueryList<ElementRef>;

@ViewChildren('tableRow') tableRows: QueryList<ResultTableRowComponent>

@ContentChildren(NgxSplideSlideComponent) public slides: QueryList<NgxSplideSlideComponent>;

@ContentChildren(forwardRef(() => LgAccordionPanelHeadingComponent), {
    descendants: true,
  })
  panelHeadings: QueryList<LgAccordionPanelHeadingComponent>;

@ViewChildren(MatMenuTrigger)
  triggers: QueryList<MatMenuTrigger>;

@ViewChildren(TheAmazingListItemComponent)
  listItemsElements: QueryList<TheAmazingListItemComponent>;

@ContentChildren(FormErrorTextComponent) errorMessages!: QueryList<FormErrorTextComponent>;

@ContentChildren(NbChatMessageComponent) messages: QueryList<NbChatMessageComponent>;

@ViewChildren('option')
    private readonly options!: QueryList<ElementRef>;

// @ts-ignore
  @ViewChildren('monthDayView') monthDayViews: QueryList<MonthDayViewComponent>

@ViewChildren(FeatureCardComponent) child: QueryList<FeatureCardComponent>;

@ViewChildren(ResizedDirective) private _resizedDirectives: QueryList<ResizedDirective>;

@ContentChildren(AnchorLabelDirective, { descendants: true })
  anchorLabels: QueryList<AnchorLabelDirective>;

@ContentChildren(LinkTo, { descendants: true })
  public links: QueryList<LinkTo>;

@ViewChildren(MenuItemDirective)
  private buttons: QueryList<MenuItemDirective>;

@ViewChildren(StixListComponent) stixLists: QueryList<StixListComponent>;

/**
   * container children for event propagation
   */
  @ViewChildren('children') children: QueryList<JsonSchemaFormComponent>;

/**
   * Element used as the icon that will be placed next to panel label.
   */
  @ContentChildren(DxcAccordionIconComponent)
  dxcAccordionIcon: QueryList<DxcAccordionIconComponent>;