DynamicPage modularity problem

Is this a bug, enhancement, or feature request?

bug

Briefly describe your proposal.

Currently DynamicPageComponent is implemented as monoliths component without possibility to scale this into individual and smaller (reusable) fragments. Everything needs to be defined inside the content, which makes this hard to add some dynamic behavior.

When using this DynamicPage all these constructs should be possible, as with larger content you want to break it down into smaller pieces.

<fdp-dynamic-page>
    <ng-container *ngTemplateOutlet="titleTemplate">
    </ng-container>

    <ng-container *ngTemplateOutlet="content">
    </ng-container>

    <ng-container *ngTemplateOutlet="footer">
    </ng-container>
</fdp-dynamic-page>

```


````html
<fdp-dynamic-page >

    <fdp-dynamic-page-title >     
        <ng-container *ngTemplateOutlet="titleContentTemplateWithActionsAndBredCrumb">
       </ng-container>
    </fdp-dynamic-page-title>
  </fdp-dynamic-page> 
    ....

```


3. 

````html
<fdp-dynamic-page >

  <div>. <!--  wrapper element should not break the structure-->
    <fdp-dynamic-page-title >     
         ....
    </fdp-dynamic-page-title>
  <div>
  </fdp-dynamic-page> 
    ....

```


#### Which versions of Angular and Fundamental Library for Angular are affected? (If this is a feature request, use current version.)


```
Angular: 11.2.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: <error>

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.8
@angular-devkit/build-angular   0.1102.8
@angular-devkit/core            11.2.8
@angular-devkit/schematics      11.2.8
@angular/cdk                    11.2.8
@angular/cli                    11.2.8
@angular/material               11.2.8
@schematics/angular             10.1.7
@schematics/update              0.1102.8
ng-packagr                      11.2.4
rxjs                            6.6.7
typescript                      4.1.5
    
```

[fkolar]

• For the second case I think I can use the same it will be verbose.
• I just quickly tested the wrapping content with the same ngProjectAs, and it seem it works too, but more tomorrw.

You always find some solution dont you! ? 😉

[dimamarksman]

Now you can use something like that:

<fdp-dynamic-page>
                <ng-container ngProjectAs="fdp-dynamic-page-title">
                    <ng-container *ngTemplateOutlet="pageTitleTmpl"></ng-container>
                </ng-container>
                <ng-container ngProjectAs="fdp-dynamic-page-header">
                    <ng-container *ngTemplateOutlet="pageHeaderTmpl"></ng-container>
                </ng-container>
                <ng-container ngProjectAs="fdp-dynamic-page-content">
                    <ng-container *ngTemplateOutlet="pageContentTmpl"></ng-container>
                </ng-container>
                <ng-container ngProjectAs="fdp-dynamic-page-footer">
                    <ng-container *ngTemplateOutlet="pageFooterTmpl"></ng-container>
                </ng-container>

                <!-- fdp-dynamic-page-title and fdp-dynamic-page-header rely on DynamicPageService which provided by  fdp-dynamic-page so template must be defined inside fdp-dynamic-page -->
                <ng-template #pageTitleTmpl>
                    <fdp-dynamic-page-title
                        [title]="pageTitle"
                        [subtitle]="pageSubtitle"
                    >
                        <fd-breadcrumb>...</fd-breadcrumb>
                        <fdp-dynamic-page-key-info>...</fdp-dynamic-page-key-info>
                        <fdp-dynamic-page-global-actions>...</fdp-dynamic-page-global-actions>
                        <fdp-dynamic-page-layout-actions>...</fdp-dynamic-page-layout-actions>
                    </fdp-dynamic-page-title>
                </ng-template>

                <ng-template #pageHeaderTmpl>
                    <fdp-dynamic-page-header
                        [collapsible]="true"
                        [pinnable]="true"
                        [collapsed]="false"
                        (collapseChange)="onCollapseChange($event)"
                    >
                        Page header text goes here
                    </fdp-dynamic-page-header>
                </ng-template>

                <ng-template #pageContentTmpl>
                    <fdp-dynamic-page-content>
                        Put your page conetnt here
                    </fdp-dynamic-page-content>
                </ng-template>

                <ng-template #pageFooterTmpl>
                    <fdp-dynamic-page-footer>Footer Bar</fdp-dynamic-page-footer>
                </ng-template>
</fdp-dynamic-page>