{"id":21231588,"url":"https://github.com/piyalidas10/quiz-flip-flop-angular","last_synced_at":"2025-06-16T22:33:28.637Z","repository":{"id":38589988,"uuid":"247400400","full_name":"piyalidas10/Quiz-Flip-Flop-Angular","owner":"piyalidas10","description":"Quiz game with Flip Flop animation in Angular 12","archived":false,"fork":false,"pushed_at":"2023-03-13T11:11:59.000Z","size":11470,"stargazers_count":12,"open_issues_count":24,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T15:21:26.520Z","etag":null,"topics":["angular","flipflop","quiz","quiz-game","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/piyalidas10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-15T04:21:11.000Z","updated_at":"2024-07-02T19:56:40.000Z","dependencies_parsed_at":"2023-02-07T14:31:39.653Z","dependency_job_id":null,"html_url":"https://github.com/piyalidas10/Quiz-Flip-Flop-Angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/piyalidas10/Quiz-Flip-Flop-Angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FQuiz-Flip-Flop-Angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FQuiz-Flip-Flop-Angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FQuiz-Flip-Flop-Angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FQuiz-Flip-Flop-Angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/Quiz-Flip-Flop-Angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FQuiz-Flip-Flop-Angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260252192,"owners_count":22981209,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","flipflop","quiz","quiz-game","typescript"],"created_at":"2024-11-20T23:47:23.937Z","updated_at":"2025-06-16T22:33:28.609Z","avatar_url":"https://github.com/piyalidas10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flipflop Quiz game\n\ncreate an Interface class for Quiz data by running following command defining the type of values for quiz.\n\n# Helpfull Tutorials\nhttps://dzone.com/articles/how-to-dynamically-create-a-component-in-angular\nhttps://github.com/softgandhi/ng2-quiz/blob/master/src/app/quiz/quiz.component.ts\n\n# Live URL\nhttps://piyalidas10.github.io/flipflop-quiz/\n\n```\nng generate class models/Quiz\n```\n\n# Run Application\n```\nng serve\nlocalhost:4200/\n```\n\n![flipflop Quiz](screenshot.png)\n\n# Dynamically Create a Component in Angular\n\nI have a component \"Quizexpand\" which you want to load dynamically from \"Quizhome\" component. To load \"Quizexpand\" you need a container inside \n\"Quizhome\" component.\nThe template for QuizhomeComponent is as below:\n\n```\n\u003cdiv class=\"flip-card-back\" (click)=\"closeSection(startIndex)\"\u003e\n    \u003cng-template #quizcontainer\u003e\n    \u003c/ng-template\u003e\n\u003c/div\u003e\n```\n\nAs you can see, we have an entry point template or a container template in which we will load QuizexpandComponent dynamically.\nIn QuizhomeComponent, we need to import the following:\n\n 1. ViewChild, ViewContainerRef, and ComponentFactoryResolver from @angular/core. \n 2. ComponentRef and ComponentFactory from @angular/core. \n 3. QuizexpandComponent from quizexpand.component.\n\nWe can access template using ViewChild inside the Component class. The template is a container in which we want to load the component dynamically. Therefore, we have to access template with ViewConatinerRef.\n\nViewContainerRef represents a container where one or more views can be attached. This can contain two types of views.\n\nHost Views are created by instantiating a component using createComponent and Embedded Views are created by instantiating an Embedded Template usingcreateEmbeddedView. We will use Host Views to dynamically load QuizexpandComponent.\n\nLet us create a variable called entry which will refer to the template element. In addition, we have injected ComponentFactoryResolver services to the component class, which will be needed to dynamically load the component.\n\n```\n@ViewChild('quizcontainer', { read: ViewContainerRef, static: true }) entry: ViewContainerRef;\n```\n\nKeep in mind that the entryvariable, which is a reference to a template element, has an API to create components, destroy components, etc.\n\nTo create a component, let us first create a function. Inside the function, we need to perform the following tasks:\n\n1. Clear the container.\n2. Create a factory for QuizexpandComponent.\n3. Create a component using the factory.\n4. Pass the value for @Input properties using a component reference instance method.\n5. Putting everything together, the openComponent function will look like the below code:\n\nPutting everything together, the openComponent function will look like the below code:\n\n```\nopenComponent(index) {\n    this.entry.clear();\n    console.log('openComponent entry =\u003e ', this.entry);\n    const alreadyChoosedAns = this.showAlreadySelectedAns(index);\n    console.log('alreadyChoosedAns =\u003e ', alreadyChoosedAns);\n    const myFactory = this.resolver.resolveComponentFactory(QuizexpandComponent);\n    this.myRef = this.entry.createComponent(myFactory);\n    this.myRef.instance['data'] = this.quizLists[index];\n    this.myRef.instance['serialno'] = index;\n    this.myRef.instance['alreadychoosedans'] = alreadyChoosedAns;\n    this.myRef.instance['chooseVal'].subscribe(event =\u003e {\n      console.log('chooseVal =\u003e ', event);\n      this.checkDuplicateAns(event);\n    });\n    this.myRef.changeDetectorRef.detectChanges();\n}\n```\nclick on \"expandSection\" function this \"openComponent\" function will be called.\n\nYou can destroy a component using the destroy method on the myRef.\n\n```\ncloseComponent(index) {\n    console.log('close component', index);\n    this.myRef.destroy();\n}\n```\n\nAt this point, when running the application, you will get an error because we have not set the entryComponents in AppModule. We can set that as shown in the listing below:\n\n```\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\nimport { HttpClientModule } from '@angular/common/http';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { AppComponent } from './app.component';\nimport { QuizhomeComponent } from './quizhome/quizhome.component';\nimport { QuizexpandComponent } from './quizexpand/quizexpand.component';\n\nimport { ApiService } from './services/api.service';\n\n// import { QuizcontainerDirective } from './quizhome/quizhome.component';\nimport { QuizresultComponent } from './quizresult/quizresult.component';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    QuizhomeComponent,\n    // QuizcontainerDirective,\n    QuizexpandComponent,\n    QuizresultComponent\n  ],\n  imports: [\n    BrowserModule,\n    CommonModule,\n    HttpClientModule,\n    ReactiveFormsModule\n  ],\n  schemas: [\n    CUSTOM_ELEMENTS_SCHEMA\n  ],\n  providers: [ApiService],\n  entryComponents: [\n    QuizexpandComponent\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fquiz-flip-flop-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Fquiz-flip-flop-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fquiz-flip-flop-angular/lists"}