How to use nested templates in Angular.js?

Question

I have root selector:

<body>
    <my-app>
        Loading...
    </my-app>
</body>

In him loaded component with template:

@Component({
    selector: 'my-app',
    template: `
               <p>It is nested content:</p>
               <div class="content">
                   <nested-selector></nested-selector> 
               </div>`
})

Now I want to download the content in nested-selector:

@Component({
    selector: 'nested-selector',
    template: `<p>{{content}}</p>`
})

export class Mycomponent{
   public content = "qwerty12345";
}

As a result, appended in the end an string:

<nested-selector _ngcontent-rbv-2="">qwerty12345</nested-selector>

As a result, we get the following page:

<body>
    <my-app>
        <p>It is nested content:</p>
        <div class="content">
           <nested-selector></nested-selector> 
        </div>
      <nested-selector _ngcontent-rbv-2="">qwerty12345</nested-selector>
    </my-app>
</body>

Although page should look like this:

<body>
    <my-app>
        <p>It is nested content:</p>
        <div class="content">
           <nested-selector>qwerty12345</nested-selector> 
        </div>
    </my-app>
</body>

Why is this happening? Why he creates a new selector? How to make it work properly?

EDIT: I attached the main project files to uncover the essence of the problem: https://plnkr.co/edit/DsDpXG72bjpyaWfPc1S0?p=preview

I'm pretty sure this is because your HTML is invalid in some way. Angular is quite picky and doesn't work with HTML that is invalid but the browser would accept. For example in MyApp component you use ' (single quote) instead of ``` (backtick) for multiline string. Not sure if this is related to the problem though. — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 8, 2016 at 9:55
@Günter Zöchbauer, In fact, I use templateUrl. Not a problem in quotes — sanu
– sanu, Commented Mar 8, 2016 at 10:19
I see. But it has to be somewhere else then in the code you provided, otherwise the Plunker would show the same behavior. — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 8, 2016 at 10:20
See the Plunker in my answer. It shows the desired behavior. Can you try to modify the Plunker to get the faulty behavior? — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 8, 2016 at 10:35

Günter Zöchbauer · Accepted Answer · 2016-03-08 10:32:31Z

1

I'm pretty sure you HTML is invalid.

.

I tried to reproduce in this Plunker but it shows the desired behavior.

answered Mar 8, 2016 at 10:32

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

10 Comments

sanu Over a year ago

I attached the main project files to uncover the essence of the problem. I'm not sure that things are in the validity of HTML. You can look at this? drive.google.com/file/d/0Bza2fLKhdhimb01pMVpSTktQVlk/…

Günter Zöchbauer Over a year ago

Sorry, I won't download arbitrary zip files. Just use the Plunker and extend it with your code until you can reproduce.

Günter Zöchbauer Over a year ago

Try to create a fork first. I'm not very familiar with Plunker myself.

sanu Over a year ago

It seems to have happened to upload on plunker: plnkr.co/edit/DsDpXG72bjpyaWfPc1S0?p=preview

Günter Zöchbauer Over a year ago

Looks more like broken imports, not related to your question. Check the browser console output.

|

Collectives™ on Stack Overflow

How to use nested templates in Angular.js?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related