replace: true equivalent for Angular 2 components?

[Ben McFerren]

In Angular 1 replace: true on a directive definition would eliminate the artificial <my-directive></my-directive> element from the dom and simply include the HTML elements found in the directive's template.

Is there an equivalent to this for Angular 2 components? So that I can avoid seeing <my-directive></my-directive> in the dom when I use one of my components?

[Sander Elias]

Hi Ben,

No, there will not be such a thing. Its also deprecated in Angular 1. The only reason it exists because of some bugs in IE8. Don't use this feature. 

Why would you avoid `<my-directive></my-directive>` in the first place? It is valid HTML5. 

Then there is this. In a SPA, the DOM is just a part of the internal state of your application. Are you also worried on how your variables are represented in memory? Or on how your database looks if you open it using notepad?

Just my $0.02 

Regards

Sander

[Ben McFerren]

Thnx for your response Sander

I am sad to hear that it is deprecated and can supply a use case to demonstrate its value:

<ul>

    <my-component *ng-for="#item of items"

            *ng-if="item.display"

             my-component-title={{item.name}}>

    </my-component>

</ul>

my-component's template:

<li>

   ...

</li>

If I instead nest <my-component> inside of a <li>, then I get an empty bullet

ng-for is meant to cycle through an array of component (elements) and <ul> is meant to cycle through an array of <li>

[Sander Elias]

Hi Ben,

You have a valid use-case. I don't have an easy answer for you. I can see way's to work around this, but all of them make it more complex. I can open a git-issue for this, or would you like to do that yourself?

Regards

Sander

[Ben McFerren]

no need - I am just refactoring and looking for metaphors in the syntax

thank you greatly for helping me Sander

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/_EcFXHkIm_c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Benjamin McFerren
Sea * Side Syndication
www.seasidesyndication.com
(415) 238-8167

(786) 357-1485

sending thoughts out to become waves

[Herman Bovens]

Why would you avoid `<my-directive></my-directive>` in the first place? It is valid HTML5. 

Then there is this. In a SPA, the DOM is just a part of the internal state of your application. Are you also worried on how your variables are represented in memory? Or on how your database looks if you open it using notepad?

I have the same issue as Ben.  Just because I decide to refactor a piece of HTML into a separate component for readability or reusability doesn't mean I want to add an extra element around it in the final HTML.  The comparison with variable representation in memory is only partly correct:

1) C / C++ programmers are indeed worried about this, although in javascript, ruby, java etc. it doesn't matter because it's transparent for the programmer,

2) I don't care how the DOM is represented in memory, but changing the DOM itself (not just its representation) does have an effect on other source code, such as CSS selectors, or in Ben's example: the relationship with a parent element.

[Herman Bovens]

Btw an example similar to Ben's <ul> an <li> is <tbody> and <tr>.  You definitely don't want an extra element in between.

[Günter Zöchbauer]

Just us an attibute selector for your component then you can have a custom component that looks like

<li my-component>

  <p>xxxx</p>

</li>

[Sander Elias]

Hi Herman,

As said before, use an attribute selector for your component in stead of an tag-name. This will resolve this issue. 

Regards

Sander

[Helder Santos]

I'm facing the same problem...

The extra tag is breaking some CSS from a framework I'm using.

You are suggesting to use an attribute component, but how can I create one? Is there any example?

Do I only need to add the '[my-component]' on the selector?

[Sander Elias]

Hi Helder,

Yes, in stead of <my-custom-tr> use <tr my-custom-tr>, and then in your components like '[my-custom-tr]' will do the trick.

Regards

Sander

[Andrey Nikolaev]

It will not work if i want to bind to events on outer tag in child component

<ul>

<li (click) = "fn">

</ul>

i want to put <li> inside child component and handle click in it without anything betwean <ul> and <li>

четверг, 1 сентября 2016 г., 9:48:56 UTC+3 пользователь Sander Elias написал:

[Sander Elias]

Hi Andrey,

The sample you provided will just run without an issue. Can you provide something that explains your problem in a bit more detail please?

Regards

Sander

[Andrey Nikolaev]

For example:

parent directive template:

<ul class = "parent">
<child-directive></child-directive>
</ul>

child template:

<li
 class = "child"

 [class.active]="isActive(item)"
 (mouseenter)="activateItem(item)"
 (click)="selectValue(item,$event)">
<a class = "label" >
{{label}}
<a>
<a class = "action1">X</a>
</li>

since i use third party css framework i need to have no additional tags between [parent], [child] and content of [child]

but i need to listen to events on top level of child directive

if i use your suggestion i will have to do something like this in parent template

<ul class = "parent">
<li
 class = "child"
 child-directive
>
</li>
</ul>

and child template will have multiple nodes on top level.

PS. while i was writing this i have found decorator:

@HostListener

i think it will suffice for current task

вторник, 6 сентября 2016 г., 19:50:15 UTC+3 пользователь Sander Elias написал:

[Sander Elias]

Hi Andrey,

That was indeed what I was saying. It looks like you are looking for some component interaction. Have you seen this section about that in the documentation? I think it will help you.

Regards

Sander

[Ivan Ukraine]

Hi all,

It there such ability like replace: true now?

I have problem with material/angular components:

<mat-grid-list>

  <mat-grid-tile>

  </mat-grid-tile>

</mat-grid-list>

They are angular components. I can`t put another component bettwen them becouse grid not working after it.

Attribute binding not working becouse it is already angular component.

<mat-grid-list>

  <mat-grid-tile [my-component]> ! throw error component already binded MAT-GRID-TILE

  </mat-grid-tile>

</mat-grid-list>

It there is something new about it please tell me.

tried use <ng-container> and <ng-template> not helped at all.

in ng-container I can put directive but not component. Can make ngFor and ngIf

ng-template also not working it generate div and grid not displaing it some .

Regards

Ivan

[Sander Elias]

Hi Ivan,

There is not, probably never will be a replacement for replace:true. The idea is nice, but the result will just be too unpredictable
The way to cater for such use-cases is as I described above a <ng-container ...></ng-container>, or, use a directive to add the functionality you need.

If you can showcase your issue in a stackblitz I will take a look and come up with a working solution.

Regards
Sander

​