8

I have a bunch of static pages that use various components that are placed wherever a HTML designer likes. e.g. within any page on a WordPress site.

Though the sample components shown here are simple Panels, but in reality there are all sorts of components, e.g. Search, Lists, Editors, Views etc...

Currently they have been done on lots of Wordpress Sites where each and every page can have totally different layouts. In the past we used Angular 1.5 where the WP developer you could just put our app tag up near the body and then any widget (we have about 30) could be placed 1 or more times in any page.

Components can be re-used so making the components root components via the bootstrap[] property does not make sense as you can only use a root component once on a page. As seen in my second example.

Technique 1

Here is a screenshot and Plunker for the first setup. Notice that I have 4 area's in which I place 3 components with component 1 being reused.

This Example is done by laying out the components inside a single root component, which is impractical for my use case where Wordpress Pages will have totally different layout and composition requirements. .

Plunkr

enter image description here

Technique 2

I have tried using a technique where each widget is bootstrapped as a root component, based on this post Bootstrapping Multiple Applications Sprinkling Angular 2 components inside a non-angular page.

But when I use this technique the 2nd instance of a widget does not load. AKA widget 1.

Plunkr

See example with bootstrapping

enter image description here

Technique 2 - Has further problems

If you have bootstrapped 3 root components, you MUST use all of them otherwise Angular throws up an error about the root component that you did not use.

Plunker

enter image description here

Technique 3

The use of <ng-content></ng-content> does not seem to work root components.

See: Angular2 Root Component with ng-content

1
  • What did you end up doing? I have a similar requirement.
    – Moulde
    Oct 18, 2017 at 14:53

4 Answers 4

1

For this kind of widgets the better is to have an ng2 application instantiated per each widget like Bootstrap multiples applications. I did post a possible solution there.

I do implement an ApplicationFactory which create a dynamic selector like:

moduleFactory(selector: string, childModule : ModuleWithProviders) {

  @Component({
    selector, // dynamic selector
   ...
  })
  export class AppComponent implements AfterViewInit{
    constructor(resolver: ComponentFactoryResolver){}
    ngAfterViewInit() {
      // Cretate a Child components dynamic 
      // mapping from childModule::[bootstrap] components decoration
    }
 }

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule
   ],
   bootstrap: [AppComponent]
 })
 class AppModule { }

  platformBrowserDynamic()
      .bootstrapModule(AppModule, {providers: childModule.providers});
}

In then in ngAfterViewInit you may create a dynamic component using a ComponentFactoryResolver

This is not an ideal solutions but it works

0

You can create a bunch of wrapper components with different selectors, each wrapping the same component, and then bootstrap these wrapper components instead.

7
  • I have expanded my original post to show how bootstrapping a component to a root component, means that you can only use each component ONCE. Oct 28, 2016 at 5:55
  • That's what I explain in my answer. Create multiple wrapper components only for the purpose of wrapping your actual component. Only the selector of the outer-most component matters, you can reuse another component in each of the wrapper components as often as you want. Oct 28, 2016 at 6:02
  • I don't really understand what your suggesting, I'm wondering if you could alter one of my plunkrs to demonstrate what you mean?. But for your clarity, the static pages I'm talking about are inside WordPress where each and every page can have totally different layouts. In the past we used Angular 1.5 where you could just put your app tag up near the body and then any widget (we have about 30) can be used 1 or more times on any page. Oct 28, 2016 at 6:12
  • 1
    I agree it's dirty but it could get you going until the unerlying issue is fixed. You might also be able to create the components dynamically at runtime to reduce the pain, but I'm not sure, never played with this approach stackoverflow.com/questions/34784778/… Oct 28, 2016 at 6:25
  • 1
    FYI: Just found that this technique can't be used anyway, because if you define multiple root components, you must use ALL of them. They are not optional. I commented in my original post in the area titled "Technique 2 - Has further problems" Oct 28, 2016 at 7:30
0

Could you explain better what you want to achieve? I don't understand you... you don't need to create 4 different components to do what you're doing, you can just do it like this:

https://plnkr.co/pvvlD7O2gXZBjVkY16po?p=preview

<table>
   <tr>
      <td>
          <h2>Area 1</h2>
          <my-widget></my-widget>
      </td>
      <td>
          <h2>Area 2</h2>
          <my-widget [title]="'custom title'"></my-widget>
      </td>
    </tr>
   <tr>
      <td>
          <h2>Area 3</h2>
          <my-widget [background]="'yellow'"></my-widget>
      </td>
      <td>
          <h2>Area 4</h2>
          <my-widget [title]="'Last one'" [background]="'blue'"></my-widget>
      </td>
    </tr>
  </table>
1
  • I'm not trying to paramaterize a simple widget, I've added a not above, that explains. "Even though the sample components shown here are simple Panels, in reality there are all sorts of components, e.g. Search, Lists, Editors, Views etc..." Oct 28, 2016 at 6:08
0

Okay, with you update I got you. I'm not user if there is any way to make work what you're trying but what I'd do is something like this: `

<body>
  <my-app>
    your table code
    </my-app>
  </body>

` and then make you root element 'my-app' template looks like this: ''

'' will bind the html that you put inside 'my-app' so it'll work, and you can use a different content for each static page as you want.

3
  • The problem with that techique is the area where "your table code" is written, The HTML totally disappears after <my-app></my-app> is parsed by Angular 2. I have looked at using the <ng-content></ng-content> directive as a potential solution, but I can't seem to get that to work. Oct 28, 2016 at 6:24
  • you're right, I dunno why it's not working in plkr... but I'm using it and works perfectly, here is a test project, which I've public and where I'm using ng-content to create a modal window component: bitbucket.org/albertomartineztomas/angular2_test/src/… Oct 28, 2016 at 6:29
  • I found out why it does not work, <ng-content> cannot be used for root components, I've listed a link in my original question Oct 28, 2016 at 7:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.