Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! Join TestMu Conference

How to use componentFactoryResolver method in storybook-root

Best JavaScript code snippet using storybook-root

auth.component.ts

Source:auth.component.ts

1import {2  Component,3  ComponentFactoryResolver,4  ViewChild,5  OnDestroy,6  OnInit7} from '@angular/core';8import { NgForm } from '@angular/forms';9import { Router } from '@angular/router';10import { Observable, Subscription } from 'rxjs';11import { Store } from '@ngrx/store'12//import { AuthService, AuthResponseData } from './auth.service';13import { AlertComponent } from '../shared/alert/alert.component';14import { PlaceholderDirective } from '../shared/placeholder/placeholder.directive';15import * as fromApp from '../store/app.reducer';16import * as AuthActions from './store/auth.actions';17@Component({18  selector: 'app-auth',19  templateUrl: './auth.component.html'20})21export class AuthComponent implements OnInit, OnDestroy {22  isLoginMode = true;23  isLoading = false;24  error: string = null;25  @ViewChild(PlaceholderDirective, { static: false }) alertHost: PlaceholderDirective;26  private closeSub: Subscription;27  private storeSub: Subscription;28  constructor(29    private componentFactoryResolver: ComponentFactoryResolver,30    private store: Store<fromApp.AppState>31  ) {}32  ngOnInit() {33    this.storeSub = this.store.select('auth').subscribe(authState => {34      this.isLoading = authState.loading;35      this.error = authState.authError;36      if (this.error) {37        this.showErrorAlert(this.error);38      }39    });40  }41  onSwitchMode() {42    this.isLoginMode = !this.isLoginMode;43  }44  onSubmit(form: NgForm) {45    if (!form.valid) {46      return;47    }48    const email = form.value.email;49    const password = form.value.password;50    if (this.isLoginMode) {51      // authObs = this.authService.login(email, password);52      this.store.dispatch(53        new AuthActions.LoginStart({ email: email, password: password })54      );55    } else {56      this.store.dispatch(57        new AuthActions.SignupStart({ email: email, password: password })58      );59    }60    form.reset();61  }62  onHandleError() {63    this.store.dispatch(new AuthActions.ClearError());64  }65  ngOnDestroy() {66    if (this.closeSub) {67      this.closeSub.unsubscribe();68    }69    if (this.storeSub) {70      this.storeSub.unsubscribe();71    }72  }73  private showErrorAlert(message: string) {74    // const alertCmp = new AlertComponent();75    const alertCmpFactory = this.componentFactoryResolver.resolveComponentFactory(76      AlertComponent77    );78    const hostViewContainerRef = this.alertHost.viewContainerRef;79    hostViewContainerRef.clear();80    const componentRef = hostViewContainerRef.createComponent(alertCmpFactory);81    componentRef.instance.message = message;82    this.closeSub = componentRef.instance.close.subscribe(() => {83      this.closeSub.unsubscribe();84      hostViewContainerRef.clear();85    });86  }87}88/* export class AuthComponent implements OnInit, OnDestroy {89  isLoginMode = true;90  isLoading = false;91  error: string = null;92  @ViewChild(PlaceholderDirective, { static: false }) alertHost: PlaceholderDirective;93  private closeSub: Subscription;94  private storeSub: Subscription;95  constructor(96    private authService: AuthService,97    private router: Router,98    private componentFactoryResolver: ComponentFactoryResolver,99    private store: Store<fromApp.AppState>100  ) {}101  ngOnInit() {102    this.storeSub = this.store.select('auth').subscribe(authState => {103      this.isLoading = authState.loading;104      this.error = authState.authError;105      if (this.error) {106        this.showErrorAlert(this.error);107      }108    });109  }110  onSwitchMode() {111    this.isLoginMode = !this.isLoginMode;112  }113  onSubmit(form: NgForm) {114    if (!form.valid) {115      return;116    }117    const email = form.value.email;118    const password = form.value.password;119    if (this.isLoginMode) {120      // authObs = this.authService.login(email, password);121      this.store.dispatch(122        new AuthActions.LoginStart({ email: email, password: password })123      );124    } else {125      this.store.dispatch(126        new AuthActions.SignupStart({ email: email, password: password })127      );128    }129    form.reset();130  }131  onHandleError() {132    this.store.dispatch(new AuthActions.ClearError());133  }134  ngOnDestroy() {135    if (this.closeSub) {136      this.closeSub.unsubscribe();137    }138    if (this.storeSub) {139      this.storeSub.unsubscribe();140    }141  }142  private showErrorAlert(message: string) {143    // const alertCmp = new AlertComponent();144    const alertCmpFactory = this.componentFactoryResolver.resolveComponentFactory(145      AlertComponent146    );147    const hostViewContainerRef = this.alertHost.viewContainerRef;148    hostViewContainerRef.clear();149    const componentRef = hostViewContainerRef.createComponent(alertCmpFactory);150    componentRef.instance.message = message;151    this.closeSub = componentRef.instance.close.subscribe(() => {152      this.closeSub.unsubscribe();153      hostViewContainerRef.clear();154    });155  }156}157 */158/* export class AuthComponent implements OnInit, OnDestroy {159  isLoginMode = true;160  isLoading = false;161  error: string = null;162  @ViewChild(PlaceholderDirective, { static: false }) alertHost: PlaceholderDirective;163  private closeSub: Subscription;164  constructor(165    private authService: AuthService,166    private router: Router,167    private componentFactoryResolver: ComponentFactoryResolver,168    private store: Store<fromApp.AppState>169  ) {}170  ngOnInit() {171    this.store.select('auth').subscribe(authState => {172      this.isLoading = authState.loading;173      this.error = authState.authError;174      if (this.error) {175        this.showErrorAlert(this.error);176      }177    });178  }179  onSwitchMode() {180    this.isLoginMode = !this.isLoginMode;181  }182  onSubmit(form: NgForm) {183    if (!form.valid) {184      return;185    }186    const email = form.value.email;187    const password = form.value.password;188    let authObs: Observable<AuthResponseData>;189    this.isLoading = true;190    if (this.isLoginMode) {191      // authObs = this.authService.login(email, password);192      this.store.dispatch(193        new AuthActions.LoginStart({ email: email, password: password })194      );195    } else {196      authObs = this.authService.signup(email, password);197    }198    // authObs.subscribe(199    //   resData => {200    //     console.log(resData);201    //     this.isLoading = false;202    //     this.router.navigate(['/recipes']);203    //   },204    //   errorMessage => {205    //     console.log(errorMessage);206    //     this.error = errorMessage;207    //     this.showErrorAlert(errorMessage);208    //     this.isLoading = false;209    //   }210    // );211    form.reset();212  }213  onHandleError() {214    this.error = null;215  }216  ngOnDestroy() {217    if (this.closeSub) {218      this.closeSub.unsubscribe();219    }220  }221  private showErrorAlert(message: string) {222    // const alertCmp = new AlertComponent();223    const alertCmpFactory = this.componentFactoryResolver.resolveComponentFactory(224      AlertComponent225    );226    const hostViewContainerRef = this.alertHost.viewContainerRef;227    hostViewContainerRef.clear();228    const componentRef = hostViewContainerRef.createComponent(alertCmpFactory);229    componentRef.instance.message = message;230    this.closeSub = componentRef.instance.close.subscribe(() => {231      this.closeSub.unsubscribe();232      hostViewContainerRef.clear();233    });234  }235}236 */237/* 238export class AuthComponent implements OnInit, OnDestroy {239  isLoginMode = true;240  isLoading = false;241  error: string = null;242  @ViewChild(PlaceholderDirective, { static: false }) alertHost: PlaceholderDirective;243  private closeSub: Subscription;244  constructor(245    private authService: AuthService,246    private router: Router,247    private componentFactoryResolver: ComponentFactoryResolver,248    private store: Store<fromApp.AppState>249  ) {}250  onSwitchMode() {251    this.isLoginMode = !this.isLoginMode;252  }253  ngOnInit() {254    this.store.select('auth').subscribe(authState => {255      this.isLoading = authState.loading;256      this.error = authState.authError;257      if(this.error){258        this.showErrorAlert(this.error);259      }260    });261  }262  onSubmit(form: NgForm) {263    if (!form.valid) {264      return;265    }266    const email = form.value.email;267    const password = form.value.password;268    let authObs: Observable<AuthResponseData>;269    this.isLoading = true;270    if (this.isLoginMode) {271   //   authObs = this.authService.login(email, password);272      this.store.dispatch(new AuthActions.LoginStart({273        email,274        password275      }));276    } else {277      authObs = this.authService.signup(email, password);278    }279    // authObs.subscribe(280    //   resData => {281    //     console.log(resData);282    //     this.isLoading = false;283    //     this.router.navigate(['/recipes']);284    //   },285    //   errorMessage => {286    //     console.log(errorMessage);287    //     this.error = errorMessage;288    //     this.showErrorAlert(errorMessage);289    //     this.isLoading = false;290    //   }291    // );292    form.reset();293  }294  onHandleError() {295    this.error = null;296  }297  ngOnDestroy() {298    if (this.closeSub) {299      this.closeSub.unsubscribe();300    }301  }302  private showErrorAlert(message: string) {303    // const alertCmp = new AlertComponent();304    const alertCmpFactory = this.componentFactoryResolver.resolveComponentFactory(305      AlertComponent306    );307    const hostViewContainerRef = this.alertHost.viewContainerRef;308    hostViewContainerRef.clear();309    const componentRef = hostViewContainerRef.createComponent(alertCmpFactory);310    componentRef.instance.message = message;311    this.closeSub = componentRef.instance.close.subscribe(() => {312      this.closeSub.unsubscribe();313      hostViewContainerRef.clear();314    });315  }...

dynamic-layer.component.ts

Source:dynamic-layer.component.ts

1/*2* @Description:3* @version: 1.04* @Author: Wayne Yu5* @Date: 2021-05-21 11:30:506 * @LastEditors: Wayne Yu7 * @LastEditTime: 2021-11-16 11:16:078*/9import { HttpClient } from '@angular/common/http';10import { PageDirective } from './page.directive';11import { Component, OnInit, ComponentFactoryResolver, ViewChild, Input, OnChanges, SimpleChanges, ComponentRef } from '@angular/core';12import { LoginPageComponent, LobbyComponent, VideoComponent, ShopComponent, UserCenterComponent, AboutUsComponent, SoundAndLogoutComponent, ContactUsComponent,13  StartUpComponent, VideoRecordComponent, RecordPlayBackComponent, LedgerComponent, AddressComponent, EditAddressComponent, OrderForGoodsComponent, PrizeComponent,14  LastWinPlayBackComponent } from '../../pages/game-page.module';15import { GM, trace, Loading, MainPage, Trigger, WebPages } from '../../service/dinomao-game.module';16import { Application } from 'resize-able-ui';17import { environment } from '../../environments/environment';18@Component({19  selector: 'app-dynamic-layer',20  templateUrl: './dynamic-layer.component.html'21})22export class DynamicLayerComponent implements OnInit, OnChanges{23  @Input() mainHeight!: number;24  private pageHeight: number = 0;25  @ViewChild(PageDirective, { static: true }) appPages!: PageDirective;26  componentRef!: ComponentRef<MainPage>;27  private currentPage: string = "";28  hasHead: boolean = false;29  hasBotton: boolean = false;30  menuIndex: number = 0;31  constructor( private componentFactoryResolver: ComponentFactoryResolver, private http: HttpClient ) { }32  ngOnInit() {33    GM.configs = environment.gameConfig;34    this.gotoPage( WebPages.LOGIN, null );35    Trigger.gotoPage = this.gotoPage.bind( this );36    this.checkForceUpdate();37  }38  39  async checkForceUpdate(){40    if( Application.system.isApp() ){41      let versionInfo: any = await this.http.get( GM.configs.dataServerUrl + "mobile/status.htm" ).toPromise();42      let obj: any = Application.system.isIOS ? versionInfo.platform.iOS : versionInfo.platform.Android;43      if( obj.force_update && obj.app_version > GM.configs.version ){44        Trigger.popupManager.forceUpdate( obj.app_url );45      }46    }47  }48  ngOnChanges( params: SimpleChanges ){49    this.pageHeight = params.mainHeight.currentValue;50    if( this.componentRef ) this.componentRef.instance.setHeight( this.pageHeight )51  }52  gotoPage( page: string, data: any ){53    trace.log( page );54    trace.log( data );55    if( this.currentPage == page ){56      trace.log( "already in this page: " + page );57      return;58    }59    let componentFactory: any = null;60    switch( page ){61      case WebPages.LOGIN: componentFactory = this.componentFactoryResolver.resolveComponentFactory(LoginPageComponent);62        break;63      case WebPages.LOBBY: componentFactory = this.componentFactoryResolver.resolveComponentFactory(LobbyComponent);64        break;65      case WebPages.VIDEO: componentFactory = this.componentFactoryResolver.resolveComponentFactory(VideoComponent);66        break;67      case WebPages.SHOP: componentFactory = this.componentFactoryResolver.resolveComponentFactory(ShopComponent);68        break;69      case WebPages.USER_CENTER: componentFactory = this.componentFactoryResolver.resolveComponentFactory(UserCenterComponent);70        break;71      case WebPages.ABOUT_US: componentFactory = this.componentFactoryResolver.resolveComponentFactory(AboutUsComponent);72        break;73      case WebPages.SETTINGS: componentFactory = this.componentFactoryResolver.resolveComponentFactory(SoundAndLogoutComponent);74        break;75      case WebPages.INVITE: componentFactory = this.componentFactoryResolver.resolveComponentFactory(SoundAndLogoutComponent);76        break;77      case WebPages.CONTACT: componentFactory = this.componentFactoryResolver.resolveComponentFactory(ContactUsComponent);78        break;79      case WebPages.START_UP: componentFactory = this.componentFactoryResolver.resolveComponentFactory(StartUpComponent);80        break;81      case WebPages.VIDEO_RECORD: componentFactory = this.componentFactoryResolver.resolveComponentFactory(VideoRecordComponent);82        break;83      case WebPages.RECORD_PLAY: componentFactory = this.componentFactoryResolver.resolveComponentFactory(RecordPlayBackComponent);84        break;85      case WebPages.LAST_WIN_PLAY: componentFactory = this.componentFactoryResolver.resolveComponentFactory(LastWinPlayBackComponent);86        break;87      case WebPages.LEDGER: componentFactory = this.componentFactoryResolver.resolveComponentFactory(LedgerComponent);88        break;89      case WebPages.ADDRESS: componentFactory = this.componentFactoryResolver.resolveComponentFactory(AddressComponent);90        break;91      case WebPages.EDIT_ADDRESS: componentFactory = this.componentFactoryResolver.resolveComponentFactory(EditAddressComponent);92        break;93      case WebPages.ORDER: componentFactory = this.componentFactoryResolver.resolveComponentFactory(OrderForGoodsComponent);94        break;95      case WebPages.PRIZE: componentFactory = this.componentFactoryResolver.resolveComponentFactory(PrizeComponent);96        break;97      default:98        alert( "page name error" );99        return;100    }101    Loading.status = 0;102    const viewContainerRef = this.appPages.viewContainerRef;103    viewContainerRef.clear();104    105    this.componentRef = viewContainerRef.createComponent<MainPage>( componentFactory );106    this.componentRef.instance.setHeight( this.pageHeight );107    if( data ) {108      try{109        this.componentRef.instance.setData( data );110      }111      catch( e ){ trace.log( "page set data error" ) }112    }113    this.currentPage = page;114    this.setPageHeadAndBotton( page );115  }116  setPageHeadAndBotton( page: string ){117    let ar: boolean[] = WebPages.pageHeadAndBotton( page );118    this.hasHead = ar[0];119    this.hasBotton = ar[1];120    if( this.hasBotton ) this.menuIndex = WebPages.pageMenuIndex( page );121  }...

popup-layer.component.ts

Source:popup-layer.component.ts

1import { Tween } from 'resize-able-ui';2import { PurchaseSuccessComponent, LogoutComponent, ForceUpdateComponent, WelcomeComponent, GenericPopupComponent, GenericPoComponent,3  DailyBonusComponent, ProductInfoComponent, GetVipComponent, ResultFailedComponent, ResultWinComponent, DeleteAddressComponent, MissAddressInfoComponent,4  ExchangeComponent, VideoErrorComponent} from '../../../popups/game-popups.module';5import { GenericModalComponent, PopupVo, Trigger, PopupVoType } from '../../../service/dinomao-game.module';6import { Component, OnInit, ViewChild, ComponentRef, ComponentFactoryResolver, ElementRef } from '@angular/core';7/*8* @Description: 9* @version: 1.010* @Author: Wayne Yu11* @Date: 2021-07-14 11:16:4012 * @LastEditors: Wayne Yu13 * @LastEditTime: 2021-12-29 17:56:1114*/15import { PopupDirective } from './popup-directive.directive';16@Component({17  selector: 'app-popup-layer',18  templateUrl: './popup-layer.component.html'19})20export class PopupLayerComponent implements OnInit {21  @ViewChild (PopupDirective, { static: true }) appPages!: PopupDirective;22  componentRef!: ComponentRef<GenericModalComponent>;23  @ViewChild('carousel', {static: true}) carousel!: ElementRef;24  private _scale: number = 0;25  set scale( value: number ){26    this._scale = value;27    if( this.carousel ) this.carousel.nativeElement.style.transform ='scale(' + value + ')';28  }29  get scale(): number{30    return this._scale;31  }32  33  constructor( private componentFactoryResolver: ComponentFactoryResolver ) { }34  ngOnInit() {35    Trigger.popupManager.addPopupFunc = this.addPopup.bind(this);36    Trigger.popupManager.loadedPopupFunc = this.popupLoaded.bind(this);37    Trigger.popupManager.closePopupFunc = this.popupClose.bind(this);38    this.scale = 0.01;39  }40  addPopup( popupVo: PopupVo ): GenericModalComponent{41    Trigger.popupData = popupVo;42    const viewContainerRef = this.appPages.viewContainerRef;43    viewContainerRef.clear();44    45    let componentFactory: any;46    switch( popupVo.type ){47      case PopupVoType.PO:48        componentFactory = this.componentFactoryResolver.resolveComponentFactory( GenericPoComponent );49        break;50      case PopupVoType.POPUP:51        componentFactory = this.componentFactoryResolver.resolveComponentFactory( GenericPopupComponent );52        break;53      case PopupVoType.WELCOME:54        componentFactory = this.componentFactoryResolver.resolveComponentFactory( WelcomeComponent );55        break;56      case PopupVoType.DAILY:57        componentFactory = this.componentFactoryResolver.resolveComponentFactory( DailyBonusComponent );58        break;59      case PopupVoType.FORCE_UPDATE:60        componentFactory = this.componentFactoryResolver.resolveComponentFactory( ForceUpdateComponent );61        break;62      case PopupVoType.PRODUCT_INFO:63        componentFactory = this.componentFactoryResolver.resolveComponentFactory( ProductInfoComponent );64        break;65      case PopupVoType.LOGOUT: 66        componentFactory = this.componentFactoryResolver.resolveComponentFactory( LogoutComponent );67        break;68      case PopupVoType.PURCHASE_SUCCESS:69        componentFactory = this.componentFactoryResolver.resolveComponentFactory( PurchaseSuccessComponent );70        break;71      case PopupVoType.CLUB:72        componentFactory = this.componentFactoryResolver.resolveComponentFactory( GenericPoComponent );73        break;74      case PopupVoType.GET_VIP:75        componentFactory = this.componentFactoryResolver.resolveComponentFactory( GetVipComponent );76        break;77      case PopupVoType.RESULT_FAILED:78        componentFactory = this.componentFactoryResolver.resolveComponentFactory( ResultFailedComponent );79        break;80      case PopupVoType.RESULT_WIN:81        componentFactory = this.componentFactoryResolver.resolveComponentFactory( ResultWinComponent );82        break;83      case PopupVoType.DELETE_ADDRESS:84        componentFactory = this.componentFactoryResolver.resolveComponentFactory( DeleteAddressComponent );85        break;86      case PopupVoType.MISS_ADDRESS_INFO:87        componentFactory = this.componentFactoryResolver.resolveComponentFactory( MissAddressInfoComponent );88        break;89      case PopupVoType.EXCHANGE: 90        componentFactory = this.componentFactoryResolver.resolveComponentFactory( ExchangeComponent );91        break;92      case PopupVoType.VIDEO_ERROR: 93        componentFactory = this.componentFactoryResolver.resolveComponentFactory( VideoErrorComponent );94        break;95      default:96        alert( "no such things" );97        break;98    }99    this.componentRef = viewContainerRef.createComponent<GenericModalComponent>( componentFactory );100    return this.componentRef.instance;101  }102  popupLoaded(){103    Tween.to( this, 0.35, { scale: 1 } );104  }105  popupClose(){106    Tween.to( this, 0.35, { scale: 0.01 }, 0, this.afterClose.bind( this ) );107  }108  afterClose(){109    const viewContainerRef = this.appPages.viewContainerRef;110    viewContainerRef.clear();111    Trigger.popupManager.popupClosed();112  }...

ComponentPortal.ts

Source:ComponentPortal.ts

1import { ComponentFactoryResolver } from "@angular/core";2/** è¿ä¸ªç±»ï¼çº¯ç²¹å°±æ¯ä¸ºäºä¿åä¸äºåæ°ï¼æ²¡æå®éæä¹ */3export class ComponentPortal {4    /** The type of the component that will be instantiated for attachment. */5    /** å°è¦å®ä¾åä»¥è¿è¡è¿æ¥çç»ä»¶çç±»åã*/6    component: any;7    /**8     * [Optional] Where the attached component should live in Angular's *logical* component tree.9     * This is different from where the component *renders*, which is determined by the PortalOutlet.10     * The origin is necessary when the host is outside of the Angular application context.11     */12    /**13     * [å¯é] éå ç»ä»¶åºä½äº Angular ç *é»è¾* ç»ä»¶æ ä¸çä½ç½®ã14     * è¿ä¸ç»ä»¶ *åç°* çä½ç½®ä¸åï¼åèç± PortalOutlet ç¡®å®ã15     * å½ä¸»æºä½äº Angular åºç¨ç¨åºä¸ä¸æä¹å¤æ¶ï¼æºæ¯å¿éçã16     */17    viewContainerRef?: any;18    /** [Optional] Injector used for the instantiation of the component. */19    /** [å¯é] ç¨äºå®ä¾åç»ä»¶çæ³¨å¥å¨ã*/20    injector?: any;21    /**22     * Alternate `ComponentFactoryResolver` to use when resolving the associated component.23     * Defaults to using the resolver from the outlet that the portal is attached to.24     */25    /**26     * è§£æå³èç»ä»¶æ¶è¦ä½¿ç¨çå¤ç¨"ç»ä»¶å·¥åè§£å³æ¹æ¡"ã27     * é»è®¤ä½¿ç¨é¨æ·è¿æ¥å°çæåº§ä¸çè§£æç¨åºã28     */29    componentFactoryResolver?: ComponentFactoryResolver | null;30    constructor(31        component: any,32        viewContainerRef?: any,33        injector?: any,34        componentFactoryResolver?: ComponentFactoryResolver | null,35    ) {36        this.component = component;37        this.viewContainerRef = viewContainerRef;38        this.injector = injector;39        this.componentFactoryResolver = componentFactoryResolver;40    }...

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.