Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat(NgTemplateOutlet): add NgTemplateOutlet directive #8021

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed

Conversation

pkozlowski-opensource
Copy link
Member

New feature

  • What is the current behavior? (You can also link to an open issue here)

There is no standard way of creating embeded views from a template.

  • What is the new behavior (if this is a feature change)?

A new NgInsert directive makes it possible to create an embeded view from a provided TemplateRef

  • Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?)

No

  • Other information:

Closes #7615

@pkozlowski-opensource
Copy link
Member Author

@mhevery opening a PR to kick off detailed discussion on the NgInsert / NgOutlet directive discussed in #7615.

Opening a PR with the simplest possible and useful implementation. We can gradually add more features like:

  • passing local variables
  • ability to insert components, not only TemplateRef

cc @jelbourn

@pkozlowski-opensource pkozlowski-opensource force-pushed the ng_insert branch 3 times, most recently from 9a478ff to 74f2eb9 Compare April 12, 2016 14:20
@jelbourn
Copy link
Member

@pkozlowski-opensource Thanks for kicking this off!

I think it's important to consider component loading in the initial API; in particular, we may want a single property that can be set to load either a TemplateRef or a component (rather than always taking TemplateRef). I like the idea of some wrapper object (like how we have Portal) because it lets you add additional information/metadata to whatever you're loading (such as locals for a TempateRef or an origin ElementRef for a component).

* Creates and inserts an embedded view based on a prepared `TemplateRef`.
*
* ### Syntax
* - `<ng-insert [templateRef]="templateRefExpression"></ng-insert>`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a better syntax would be:
<template [ngInsert]="templateRefExpression"></template>

The reason is that we would prefer not have floating <ng-insert> in the final DOM.

I am also wondering if there may be a better name then insert??

<template [ngOutlet]="templateRefExpression"></template>

@mhevery
Copy link
Contributor

mhevery commented Apr 12, 2016

Looks, good. Sorry, my only comment is about name (bit o bikeshedding.)

@mhevery mhevery self-assigned this Apr 12, 2016
@pkozlowski-opensource
Copy link
Member Author

@mhevery thnx for the review. I like the suggestion of having <template [ngInsert]="exp"> syntax as indeed, it will avoid those "dangling" elements. Will change / update the PR. (my part of bikeshedding here: it still bothers me that we use <template> both as a capture and insertion points, but not sure why... Why I would like to see them as distinct concepts? I can't think of good reasons, but yeh,....)

@jelbourn yep, let's build on top of this for components, locals etc. I will be in MTV in 4 weeks so we can iterate on this one.

@mhevery
Copy link
Contributor

mhevery commented Apr 12, 2016

@pkozlowski-opensource what is your thought on ngOutlet istead of ngInsert?

I am with you on using template for both input and output. But like you other than aesthetics not sure why it matters. Keep in mind that template is part of the web spec, so if we do come up with template-output we would be breaking away from the spec.

@mhevery
Copy link
Contributor

mhevery commented Apr 12, 2016

we could do comments <!--nd-directive: [ngOulter]="expression" -->

@pkozlowski-opensource
Copy link
Member Author

what is your thought on ngOutlet istead of ngInsert?

I've "tested" ngOutlet on people in my office and it was too confusing with a router - this is why I've proposed NgInsert in this PR.

@jelbourn
Copy link
Member

I think <template> is just fine for both. Adding behavior to comments strikes me as extremely unexpected behavior.

I also like ngOutlet over ngInsert. If you're just doing to support TemplateRef, though, a more meaningful name would be TemplateHost.

@pkozlowski-opensource pkozlowski-opensource force-pushed the ng_insert branch 2 times, most recently from 6698ef4 to 6e6e25d Compare April 13, 2016 09:43
@pkozlowski-opensource pkozlowski-opensource added the action: review The PR is still awaiting reviews from at least one requested reviewer label Apr 13, 2016
@pkozlowski-opensource
Copy link
Member Author

OK, did all the renamings / refactors discussed in the PR. Rebased, build is green.

@mhevery
Copy link
Contributor

mhevery commented Apr 15, 2016

The PR looks great, but we got into a naming discussion. The issue is that insert implies that you are adding an item to a list, in this case the TemplateRef. But in our case what is being inserted is a View not a TemplateRef, it is just that we get the View from the TemplateRef, so we don't think we want `insert.

Sorry, I know this is bikeshedding, but naming is important.

The team thinks we should call it ngTemplateOutlet to be aligned with routeOutlet since they do a very similar things, one with TemplateRef the other with Route

@pkozlowski-opensource
Copy link
Member Author

Personally I don't feel too strong about names so I'm perfectly fine with ngTemplateOutlet. Will update the PR accordingly.

Thnx for looking into this / discussing!

@pkozlowski-opensource pkozlowski-opensource force-pushed the ng_insert branch 2 times, most recently from acdb3ea to e66b087 Compare April 18, 2016 08:40
@pkozlowski-opensource pkozlowski-opensource changed the title feat(NgInsert): add NgInsert directive feat(NgTemplateOutlet): add NgTemplateOutlet directive Apr 18, 2016
This commits adds a new NgTemplateOutlet directive that can be
used to create embeded views from a supplied TemplateRef.

Closes angular#7615
@pkozlowski-opensource
Copy link
Member Author

@mhevery did the discussed renaming. Dart build is failing but I don't think it is related to my change.

@mhevery
Copy link
Contributor

mhevery commented Apr 19, 2016

Yes, dart change is unrelated.

@mhevery mhevery added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Apr 19, 2016
@mary-poppins
Copy link

Merging PR #8021 on behalf of @robertmesserle to branch presubmit-robertmesserle-pr-8021.

@bluEEil
Copy link

bluEEil commented May 1, 2016

Hello, Im trying to use this feature but with no success.
I tried following this example: http://5thingsangular.github.io/2016/04/18/issue-2.html
but with no succuess, no matter what I do I get an template parse error. I wrote the entire problem with more explanation on stack overflow as well:
[http://stackoverflow.com/questions/36965977/ngtemplateoutlet-doesnt-work-for-me](NgTemplateOutlet doesn't work for me)

I will really appreciate any help with this

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[feature] A directive to insert / stamp out TemplateRefs
7 participants