How Do I Create A Reusable Component in Angular 2 Without Typescript

Question

In the examples I've found for Angular 2, components can be created once per app as such:

(function(app) { 
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

with app/main.js bootstrapping the component:

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

But how would I define a reusable component? Documentation seems be written in Typescript or for Angular 1.

Yes, documentation is a WiP, which is why I was looking for help here :) — Phil D.
– Phil D., Commented Feb 10, 2016 at 7:08

tomastrajan · Accepted Answer · 2016-04-13 11:37:10Z

0

Every component is reusable by default. You can use it as directive inside of other component's template like <my-app></my-app> (Maybe not the best idea with root app component but with anything else like <my-user-details [user]="user"></my-user-details>). Another way to reuse components is when using Angular 2 router to navigate to same components with different route configs.

It all depends on how you build your components, usually you end up with smart (with functionality) and dumb (layout only) components where dumb will be reused the most.

answered Apr 13, 2016 at 11:37

tomastrajan

1,72614 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Phil D. Over a year ago

You're right, the use of my-app was not illustrative of what I wanted to achieve. I think my confusion was with setting window.app.AppComponent (it's been a while since I've looked at doing this without TS). Because the examples I found were all for single use components like a page I read it as if app.AppComponent was an instance of the component rather than the component class to be instantiated later. I think I need to go back and do some more tests.

Phil D. Over a year ago

I will after I've had the chance to test this solves my problem.

Phil D. Over a year ago

I'm having trouble still, but I'm sure it's something stupid. I found an earlier question here where someone covered directives with ES5. I'll have to wait until tomorrow until I can test some more before I can mark this as answered. The frustrating part is that I can work with directives in Typescript but my work doesn't want to use polyfills for some reason!

Phil D. Over a year ago

Sorry for the delay, I've been flat out. I'm pretty sure THIS is the document I'm after, but it's still a WIP. As soon as I have two of the same component the site breaks. directives: [ app.AppOtherComponent ] doesn't seem to work. Got any idea what the syntax is? Cheers.

Collectives™ on Stack Overflow

How Do I Create A Reusable Component in Angular 2 Without Typescript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related