Learning Dynamic Components — Making a Pizza Creator App using Angular

Aayush Arora
Jul 26, 2018 · 5 min read

Problem Statement

Pizza and the toppings 😄

Approach

Creating the Choices Component

Toppings Array
Looping Toppings Array
Toppings Panel
selectedToppings Method to select Toppings
Icons for selectToppings
<div #pizza></div>
@ViewChild('pizza', {read: ViewContainerRef}) pizza: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver) {}
<div class="createPizza">
<button (click)= createPizza()>Create Pizza</button>
</div>
@NgModule({   entryComponents: [PizzaComponent]})
Pizza Creator

@Input and Dynamic Components

export class PizzaComponent {
toppings: string[];
}
Choices Component Sending Data to Dynamic Component
Binding Data to Pizza Component
Adding Styles to Toppings
Complete Pizza App

Coding Blocks

Daily Tidbits on Android, Javascript and Machine Learning

Aayush Arora

Written by

Google Developer Expert for Web Technologies https://github.com/aayusharora

Coding Blocks

Daily Tidbits on Android, Javascript and Machine Learning