Questions tagged [elementref]

78 questions

votes

1 answer

How to set classes for an HTML reference from within the HTML code Angular?

I have a reference to a textarea <*wrapper-component (submit)="tx1.value ? submit(tx1.value) : tx1.setClass('required')??">

which I pass the value of into my submit function, is it possible to set…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Nov 16 '21 at 12:39">asked Nov 16 '21 at 12:39</time>
    <a href="../../users/13261153/steve-chacko" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/13261153.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Steve Chacko" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/13261153/steve-chacko" class="s-user-card--link">Steve Chacko</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">95</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="11 bronze badges">11</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-67784017">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/67784017/how-to-measure-element-width-of-an-html-element-in-angular" class="question-hyperlink">How to measure element width of an HTML element in Angular?</a></h3>
        <div class="excerpt">I want to dynamically create an element and then get its clientWidth. The code snippet looks like this using the regular DOM API.
HTML Snippet:
<div id="non-existent-element"></div>

The element has its css property visibility set to 'hidden'.…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/dom-manipulation" class="post-tag grid--cell" title="show questions tagged 'dom-manipulation'" rel="tag">dom-manipulation</a> 
                
                <a href="../../questions/tagged/angular-renderer2" class="post-tag grid--cell" title="show questions tagged 'angular-renderer2'" rel="tag">angular-renderer2</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jun 01 '21 at 06:55">asked Jun 01 '21 at 06:55</time>
    <a href="../../users/10563344/eddie-lam" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/10563344.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Eddie Lam" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/10563344/eddie-lam" class="s-user-card--link">Eddie Lam</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">579</li>
            <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
            <li class="s-award-bling s-award-bling__silver" title="5 silver badge">5</li>
            <li class="s-award-bling s-award-bling__bronze" title="22 bronze badge">22</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-67348771">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/67348771/error-when-trying-to-use-viewchild-annotation-in-angular" class="question-hyperlink">Error when trying to use ViewChild annotation in Angular</a></h3>
        <div class="excerpt">I am trying to use ViewChild like this:
@ViewChild('hello', { static: false }) 
divHello?: ElementRef;

This is the template:
<div class="wrap" #hello>
Some test data
</div>

But, the ViewChild annotation is showing this error:
Unable to resolve…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/viewchild" class="post-tag grid--cell" title="show questions tagged 'viewchild'" rel="tag">viewchild</a> 
                
                <a href="../../questions/tagged/angular-renderer2" class="post-tag grid--cell" title="show questions tagged 'angular-renderer2'" rel="tag">angular-renderer2</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked May 01 '21 at 17:00">asked May 01 '21 at 17:00</time>
    <a href="../../users/11096242/joler-botol" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/11096242.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="joler-botol" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/11096242/joler-botol" class="s-user-card--link">joler-botol</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">442</li>
            <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
            <li class="s-award-bling s-award-bling__silver" title="7 silver badge">7</li>
            <li class="s-award-bling s-award-bling__bronze" title="22 bronze badge">22</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-66017614">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/66017614/error-with-elementref-angular-unit-test-with-jest" class="question-hyperlink">Error with ElementRef angular unit test with Jest</a></h3>
        <div class="excerpt">I have an error when I run the unit tests with Jest, I have component for an application in Angular, when I have in the constructor 'ElementRef', it throws the following error:
Incrementador Component › should create

Can't resolve all parameters…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/unit-testing" class="post-tag grid--cell" title="show questions tagged 'unit-testing'" rel="tag">unit-testing</a> 
                
                <a href="../../questions/tagged/jestjs" class="post-tag grid--cell" title="show questions tagged 'jestjs'" rel="tag">jestjs</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Feb 02 '21 at 21:04">asked Feb 02 '21 at 21:04</time>
    <a href="../../users/13355187/mpuertao" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/13355187.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="mpuertao" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/13355187/mpuertao" class="s-user-card--link">mpuertao</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">21</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-65163609">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>0</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/65163609/angular-type-error-getbbox-is-not-a-function-on-elementref" class="question-hyperlink">Angular type error: getBBox() is not a function on ElementRef</a></h3>
        <div class="excerpt">I am calling this.container.nativeElement.getBBox() in ngAfterViewInit — as you can see in the screenshot, this is causing an error and getBBox() is supposedly not a function. The strange thing is that getBoundingClientRect() works just fine on the…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> 
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/bounding-box" class="post-tag grid--cell" title="show questions tagged 'bounding-box'" rel="tag">bounding-box</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Dec 06 '20 at 00:54">asked Dec 06 '20 at 00:54</time>
    <a href="../../users/10280928/tarana" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/10280928.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="tarana" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/10280928/tarana" class="s-user-card--link">tarana</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">3</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="2 bronze badges">2</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-63311601">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/63311601/detect-click-outside-of-element-angular-9-multiple-instances" class="question-hyperlink">Detect Click Outside of Element Angular 9 - Multiple Instances</a></h3>
        <div class="excerpt">In my app, on click of an element I am showing a tooltip that contains additional information. This is available for all elements in a list. I would like to be able to close the expansion on click of anything outside of the tooltip.
The concept is…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/renderer" class="post-tag grid--cell" title="show questions tagged 'renderer'" rel="tag">renderer</a> 
                
                <a href="../../questions/tagged/viewchild" class="post-tag grid--cell" title="show questions tagged 'viewchild'" rel="tag">viewchild</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
                <a href="../../questions/tagged/viewchildren" class="post-tag grid--cell" title="show questions tagged 'viewchildren'" rel="tag">viewchildren</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Aug 08 '20 at 03:41">asked Aug 08 '20 at 03:41</time>
    <a href="../../users/6354448/chocolateorange" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/6354448.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="ChocolateOrange" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/6354448/chocolateorange" class="s-user-card--link">ChocolateOrange</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">25</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="8 bronze badges">8</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-62761684">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/62761684/how-to-change-bootstrap-carousel-items-angular" class="question-hyperlink">How to change bootstrap carousel items Angular</a></h3>
        <div class="excerpt">I have 4 images and when I click and the images I want the carousel to navigate to that respective index. Since bootstrap's carousel works with jquery and this is an Angular application, I am using elementRef to select the carousel component.…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a> 
                
                <a href="../../questions/tagged/bootstrap-4" class="post-tag grid--cell" title="show questions tagged 'bootstrap-4'" rel="tag">bootstrap-4</a> 
                
                <a href="../../questions/tagged/carousel" class="post-tag grid--cell" title="show questions tagged 'carousel'" rel="tag">carousel</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jul 06 '20 at 17:50">asked Jul 06 '20 at 17:50</time>
    <a href="../../users/10626449/jonathan" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/10626449.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jonathan" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/10626449/jonathan" class="s-user-card--link">Jonathan</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">441</li>
            <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
            <li class="s-award-bling s-award-bling__silver" title="9 silver badge">9</li>
            <li class="s-award-bling s-award-bling__bronze" title="28 bronze badge">28</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-62653859">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/62653859/how-to-search-for-selected-checkbox-in-an-divsion-using-elementref-in-angular" class="question-hyperlink">How to search for selected checkbox in an divsion using elementRef in angular</a></h3>
        <div class="excerpt">Hi i am trying to make dynamic filter option that renders the property with their values on the basis of data entered by backend. On selecting value i want to fetch the checked values and pass it to backend for filtering. I am able to display the…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/angular7" class="post-tag grid--cell" title="show questions tagged 'angular7'" rel="tag">angular7</a> 
                
                <a href="../../questions/tagged/e-commerce" class="post-tag grid--cell" title="show questions tagged 'e-commerce'" rel="tag">e-commerce</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jun 30 '20 at 09:00">asked Jun 30 '20 at 09:00</time>
    <a href="../../users/13685709/santosh-upadhyay" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/13685709.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Santosh Upadhyay" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/13685709/santosh-upadhyay" class="s-user-card--link">Santosh Upadhyay</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">79</li>
            
            <li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
            <li class="s-award-bling s-award-bling__bronze" title="9 bronze badges">9</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-62088178">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/62088178/dynamic-component-loader-cannot-read-property-viewcontainerref-of-undefined" class="question-hyperlink">Dynamic component loader - Cannot read property 'viewContainerRef' of undefined</a></h3>
        <div class="excerpt">im following all steps of the ad-banner tutorial on Angular.io. But at the end  after all setup, i get an error comming from this component and function:
Ad-banner.component TS
loadComponent() {
    this.currentAdIndex = (this.currentAdIndex + 1) %…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/angular-dynamic-components" class="post-tag grid--cell" title="show questions tagged 'angular-dynamic-components'" rel="tag">angular-dynamic-components</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked May 29 '20 at 14:24">asked May 29 '20 at 14:24</time>
    <a href="../../users/8086276/mellville" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/8086276.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mellville" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/8086276/mellville" class="s-user-card--link">Mellville</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1,027</li>
            <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li>
            <li class="s-award-bling s-award-bling__silver" title="18 silver badges">18</li>
            <li class="s-award-bling s-award-bling__bronze" title="39 bronze badges">39</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-61371406">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/61371406/how-to-get-selected-option-using-elementref" class="question-hyperlink">How to get selected option using ElementRef?</a></h3>
        <div class="excerpt">I have a table where i can add dynamic rows to the table using ADD button.
To construct this table i have taken form array.
Each row is having a select box with list of options
scenario
once the user selected a option from select box and when he…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/viewchild" class="post-tag grid--cell" title="show questions tagged 'viewchild'" rel="tag">viewchild</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Apr 22 '20 at 17:31">asked Apr 22 '20 at 17:31</time>
    <a href="../../users/6588715/bikshu-s" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/6588715.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Bikshu s" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/6588715/bikshu-s" class="s-user-card--link">Bikshu s</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">389</li>
            
            <li class="s-award-bling s-award-bling__silver" title="4 silver badges">4</li>
            <li class="s-award-bling s-award-bling__bronze" title="14 bronze badges">14</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-60526536">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/60526536/get-elementref-from-component-instance" class="question-hyperlink">Get ElementRef from component instance</a></h3>
        <div class="excerpt">On my Angular library I have a code similar as below:
test.component.html:
<third-party-component #tpComponent></third-party-component>
<my-component [tp-component]="tpComponent"></my-component>

my-component.component.ts:
import { Component, Input,…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Mar 04 '20 at 12:50">asked Mar 04 '20 at 12:50</time>
    <a href="../../users/2221112/rubinhos" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/2221112.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="rubinhos" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/2221112/rubinhos" class="s-user-card--link">rubinhos</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">77</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-60291970">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/60291970/ionic-4-getting-elementref-property-on-directive" class="question-hyperlink">Ionic 4 - getting ElementRef property on Directive</a></h3>
        <div class="excerpt">I need get ElementRef value in a Directive to apply dynamically a class to the element.
My Directive:
import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[scrolling]'
})

export class ScrollingDirective {

…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/ionic-framework" class="post-tag grid--cell" title="show questions tagged 'ionic-framework'" rel="tag">ionic-framework</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Feb 19 '20 at 02:04">asked Feb 19 '20 at 02:04</time>
    <a href="../../users/10740985/diego-roque" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/10740985.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Diego Roque" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/10740985/diego-roque" class="s-user-card--link">Diego Roque</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">75</li>
            
            <li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
            <li class="s-award-bling s-award-bling__bronze" title="6 bronze badges">6</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-60110553">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>0</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/60110553/how-to-send-data-from-child-to-parent-using-elementref-and-resolvecomponentfac" class="question-hyperlink">How to send data from child to parent using ElementRef and resolveComponentFactory in Angular?</a></h3>
        <div class="excerpt">The childbox which I create from inside the parent on the fly contains a close button which triggers a close function which is actually an EventEmitter whom message should reach the parent somehow in order to destroy the child component with…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/templates" class="post-tag grid--cell" title="show questions tagged 'templates'" rel="tag">templates</a> 
                
                <a href="../../questions/tagged/binding" class="post-tag grid--cell" title="show questions tagged 'binding'" rel="tag">binding</a> 
                
                <a href="../../questions/tagged/factory" class="post-tag grid--cell" title="show questions tagged 'factory'" rel="tag">factory</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Feb 07 '20 at 09:26">asked Feb 07 '20 at 09:26</time>
    <a href="../../users/12487215/a-a" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/12487215.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="a a" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/12487215/a-a" class="s-user-card--link">a a</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">49</li>
            
            <li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
            <li class="s-award-bling s-award-bling__bronze" title="6 bronze badges">6</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-59325889">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/59325889/innerhtml-of-elementref-of-component-created-dynamically-by-componentfacory-no" class="question-hyperlink">InnerHtml of elementRef of component created dynamically by componentFacory not containing binded values</a></h3>
        <div class="excerpt">I have a simple component named component1:
This is its HTML with the bindings and with the template reference:
<div class="AAA" [ngClass]="someClass" #templateRef > 
<div class="main-container"> <span> {{someNumber}}</span></div>
</div>

This is…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/data-binding" class="post-tag grid--cell" title="show questions tagged 'data-binding'" rel="tag">data-binding</a> 
                
                <a href="../../questions/tagged/innerhtml" class="post-tag grid--cell" title="show questions tagged 'innerhtml'" rel="tag">innerhtml</a> 
                
                <a href="../../questions/tagged/viewchild" class="post-tag grid--cell" title="show questions tagged 'viewchild'" rel="tag">viewchild</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Dec 13 '19 at 15:52">asked Dec 13 '19 at 15:52</time>
    <a href="../../users/6721134/guy-e" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/6721134.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Guy E" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/6721134/guy-e" class="s-user-card--link">Guy E</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1,775</li>
            <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li>
            <li class="s-award-bling s-award-bling__silver" title="27 silver badges">27</li>
            <li class="s-award-bling s-award-bling__bronze" title="55 bronze badges">55</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-55866678">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/55866678/how-to-get-the-children-width-from-a-htmlelement-elementref" class="question-hyperlink">How to get the children width from a htmlelement (elementref)</a></h3>
        <div class="excerpt">I need to get the width of all children from a elementref.
The items are dynamically loaded
Typescript:
@ViewChild('mainSubMenu') subMenu: ElementRef;

ngAfterViewInit() {
    const greedyNav = this.subMenu.nativeElement;
    let totalSpace = 0;
   …</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/children" class="post-tag grid--cell" title="show questions tagged 'children'" rel="tag">children</a> 
                
                <a href="../../questions/tagged/elementref" class="post-tag grid--cell" title="show questions tagged 'elementref'" rel="tag">elementref</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Apr 26 '19 at 11:29">asked Apr 26 '19 at 11:29</time>
    <a href="../../users/4198589/babulaas" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/4198589.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Babulaas" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/4198589/babulaas" class="s-user-card--link">Babulaas</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">761</li>
            <li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
            <li class="s-award-bling s-award-bling__silver" title="13 silver badges">13</li>
            <li class="s-award-bling s-award-bling__bronze" title="47 bronze badges">47</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script src="../../static/js/fromnow.js"></script>
        
    </body>
</html>