0

Here is the pipe

Pipe

Here is pre-written tags in HTML file

Pre-written html tag

Here the populated HTML tag when button event is clicked

Populated HTML Content

Here is the function for adding html tag.

Funciton addNewDisplay

Here is the result - as you see, the one with html string tag doesn't compile in Ionic 3. How can I make it to compile? Thank you.

Screenshot Inspection

Vicheanak
  • 6,444
  • 17
  • 64
  • 98
  • Not sure what you mean with compile, but Angular doesn't compile anything that is added dynamically. Only markup that is added statically to a components template is compiled. If you want dynamic HTML to be compiled, you need to dynamically create a component and use the dynamic platform to compile it at runtime, then you can use`ViewContainerRef.createComponent()` to add this component to the DOM. – Günter Zöchbauer Oct 20 '17 at 07:18
  • By I mean by compiling, take a look at this screenshot: https://i.stack.imgur.com/70OPM.png, the ion-item was written in ionic `` but it compiled to ``. However, my case, I wrote inject `` but it doesn't convert to ``. How can I use ViewContainerRef.createComponent() to compile at runtime? thanks. – Vicheanak Oct 20 '17 at 07:33
  • https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular – Günter Zöchbauer Oct 20 '17 at 07:34
  • 1
    Work likes charm! Thanks. By the way, how to remove the element when we want to?? – Vicheanak Oct 20 '17 at 08:30
  • 1
    What element? If you want to remove a dynamically added component, you can use the reference you get from `vcRef.createComponent()` and call `destroy()` – Günter Zöchbauer Oct 20 '17 at 08:37
  • correct answer again, sir. you rock! How can I know which component that I select to destroy. For example, I added 3 components, then I want to delete the 2nd component. – Vicheanak Oct 20 '17 at 08:44
  • 1
    You can add an attribute to the component and when clicked, pass the attribute value to the delete method and store the component references by attribute value (`this.createdComponents['c1'] = vcRef.createComponent(...)`) . If you build the dynamically added component yourself, then you could add `@HostBinding('attr.componentId') componentId:string;` and use `(componentRef.instance as MyComponent).componentId = 'c1';`, but `componentRef` should allow you to get hold of the DOM element and use `setAttribute()` or similar (don't know by heart) – Günter Zöchbauer Oct 20 '17 at 08:52
  • hey thanks, I ended up storing it as array, and replace string every time when i added to the component: `this.cardIndex = this.cardIndex + 1; this.cardDisplay.replace("removeCard("+(this.cardIndex - 1 )+")","removeCard("+this.cardIndex+")");` so that I know which index to remove when calling `removeCard` function, `this.cardDisplays[id].destroy();` is it hacky? :D God please forgives my sin. – Vicheanak Oct 20 '17 at 09:24
  • Not necessarily. I would need to know more details. If you don't mess up indexes when elements in the middle are destoryed, then it should work fine. – Günter Zöchbauer Oct 20 '17 at 09:33
  • Yes it definitely messed up the index. How can i use setAttribute? – Vicheanak Oct 20 '17 at 10:09
  • https://angular.io/api/core/ComponentRef#location and `.nativeElement` – Günter Zöchbauer Oct 20 '17 at 10:10
  • As you see its all string. So how can i call setAttribute on that string? And how can i identify which attribute to pass to the removeComponent function? – Vicheanak Oct 20 '17 at 10:15
  • What is "all string"? You can get `event.target.getAttribute('componentId')` from the click event. https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute – Günter Zöchbauer Oct 20 '17 at 10:22
  • I finally ended up with creating id with random string: `` and created 2 key for array that stores my component, 1) id: randomstring, 2) the compoent itself. and when I remove, i search the index by key value, and removed it from the array component. `let index = this.cardDisplays.findIndex(p => p.id == this.randomString); this.cardDisplays[index].component.destroy();` – Vicheanak Oct 20 '17 at 13:06
  • 1
    Sounds fine. An UUID or similar where collisions are close to impossible should work. – Günter Zöchbauer Oct 20 '17 at 13:10

0 Answers0