Angular 2/4 dynamiczna zmiana template

Mam komponent, który realizuje dodawanie "czegoś" w systemie.

Komponent ma swój plik .html, w którym jest formularz.

Mam tam też przycisk "pokaż podsumowanie" - tutaj ma być na widoku ten sam model co na formularzu tylko inaczej ułożony(brak inputów tylko tekst itd...)

Z związku z tym, że model/dane mają być te same. Jest to ten sam ficzer(dodawanie/podgląd) to myślę jak to zrobić w ramach jednego komponentu.

Pomysł taki by po starcie kompoonentu ładował się "createForm.html" a po kliknięciu "pokaż podsumowanie" ładował się "createSummary.html" do zmiennej "templateUrl" w komponencie.

Jak to zrobić? Dobre podejście?

Błękitny Orzeł napisał(a):

Mam komponent, który realizuje dodawanie "czegoś" w systemie.

Komponent ma swój plik .html, w którym jest formularz.

Mam tam też przycisk "pokaż podsumowanie" - tutaj ma być na widoku ten sam model co na formularzu tylko inaczej ułożony(brak inputów tylko tekst itd...)

Z związku z tym, że model/dane mają być te same. Jest to ten sam ficzer(dodawanie/podgląd) to myślę jak to zrobić w ramach jednego komponentu.

Pomysł taki by po starcie kompoonentu ładował się "createForm.html" a po kliknięciu "pokaż podsumowanie" ładował się "createSummary.html" do zmiennej "templateUrl" w komponencie.

Jak to zrobić? Dobre podejście?

Ja tu widze 2 sposoby:

a) Tworzysz jeden komponent, z jednym html. Podczepiasz zmienną do click event buttona. Ta zmienna steruje dyrektywą *ngIf która pokazuje/chowa ten twój "summary"

b) Tworzysz dwa komponenty, dwa html. Komponent z podsumowaniem wewnątrz komponentu z formularzem. Zmienna i *ngIf tak jak w a), ale tym razem musisz przekazać jako Input, z rodzica do dziecka, obiekt z wartościami które chcesz wyświetlić (np. obiekt FormGroup jeśli chcesz wszystkie).