Thanks Sander. I have made it work doing exactly your suggestion. I seem to stumble upon the answer after I email you, and then you respond with exactly what I found.
With that said, I am running into an issue with use of directives and event emitters in the Angular Element. I have a directive on input element of type='radio'. The input element is looped over a set number of times based upon the attribute set in the Angular Element HTML. In this particular case, it creates 4 input elements. In each of those elements, I subscribe to an event, "*knowledgeCheckCompleted*", executed when the question is completed or has previously been answered. If previously completed or upon completion, I change the label color and attach an image to the radio button indicating correct or incorrect. The first time through, everything works as expected. However, upon returning to the page, based upon console logs, it appears that ngOnInit() for each directive is getting called twice - almost liked the same directive is being loaded 2x.I checked the HTML and only one instance of the Angular Element is loaded. Additionally, the event that the directive is subscribed to "*knowledgeCheckCompleted*", is being run 2x as well and I cannot figure out why. I have attempted to use ngOnDestroy and unsubscribe to the event, however that just creates errors when return to the page -* message: "object unsubscribed" name: "ObjectUnsubscribedError"*. If I go forward and then come back to the page, the event, along with ngOnInit() is still only run 2x - I was thinking that maybe it would be run a third time - but not the case. If I comment out the line that is emitting the event, then no duplication issues including ngOnInit() is only called 1x, but the subscribed function never gets called. I thought maybe I had a duplication of the emitter, but not the case. Any thoughts or insight or where I might look or what I am doing wrong? Thanks for the continued assistance. I greatly appreciate it. On Sat, Dec 29, 2018 at 9:01 PM Sander Elias <[email protected]> wrote: > Hi Scott, > > Yes, anything that is not a template (as your inserted HTML) does not have > access to anything angular. You can't set/get anything from your angular > class from the DOM side of things. (that would break the whole elements > part!) > To access attributes you can get them via inputs. However, you can't set > them. Use Elemetref fro now. In ivy this will get easier. > for now, something like this will work: > addClass(cssClass: string) { > this.elm.classList.add(cssClass); > } > removeClass(cssClass: string) { > this.elm.classList.remove(cssClass); > } > > This elm is the ElementRef.natveElement. Refer to my sample on how to get > that into your class easily. Well, that's for the css classes, for > attributes you have to use `this.elm.setAttribut(...)` > > Regards > Sander > > -- > You received this message because you are subscribed to a topic in the > Google Groups "Angular and AngularJS discussion" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/angular/PnHiXroP-VI/unsubscribe. > To unsubscribe from this group and all its topics, send an email to > [email protected]. > To post to this group, send email to [email protected]. > Visit this group at https://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
