# Wijmo_Angular2_Input.Wjitemtemplate

## Content

<div class="content__tsd">
						<div style="display:flex;justify-content:space-between;align-items:center">
							<h1>
								WjItemTemplate Class
							</h1>
						</div>
						<section class="tsd-comment">
							<div class="tsd-comment">
								<div class="lead">
									<p>Angular 2 directive for item templates of item list components.</p>
								</div>
								<p>The <b>[wjItemTemplate]</b> directive must be
									contained in one of the following components:
									<a href="wijmo_angular2_input.wjlistbox.html">wijmo.angular2.input.WjListBox</a>
									, <a href="wijmo_angular2_input.wjmenu.html">wijmo.angular2.input.WjMenu</a>
									, <a href="wijmo_angular2_input.wjcombobox.html">wijmo.angular2.input.WjComboBox</a>
								or <a href="wijmo_angular2_input.wjmultiselect.html">wijmo.angular2.input.WjMultiSelect</a>.</p>
								<p>The <b>[wjItemTemplate]</b> directive defines a template for items of a component
									that it's nested in.
									The template may contain an arbitrary HTML fragment with Angular 2 bindings and directives.
									The local <b>item</b>, <b>itemIndex</b> and <b>control</b> template variables can be used in Angular 2
								bindings that refer to the data item, its index, and the owner control. For example:</p>
								<pre>&lt;wj-list-box style="max-height:300px;width:250px;"
            [itemsSource]="musicians"&gt;
  &lt;ng-template wjItemTemplate let-item="item" let-itemIndex="itemIndex"&gt;
      {​{itemIndex + 1}}. &lt;b&gt;{​{item.name}}&lt;/b&gt;
      &lt;div *ngIf="item.photo"&gt;
          &lt;img [src]="item.photo" height="100" /&gt;
          &lt;br /&gt;
          &lt;a href="https://www.google.com/#newwindow=1&amp;q=The+Beatles+"
             target="_blank"
             style="color:red"&gt;go there!&lt;/a&gt;
      &lt;/div&gt;
  &lt;/ng-template&gt;
&lt;/wj-list-box&gt;</pre>
							</div>
						</section>
						<section class="tsd-hierarchy">
							<h3>Heirarchy</h3>
							<ul class="tsd-hierarchy">
								<li>
									<span class="target">WjItemTemplate</span>
								</li>
							</ul>
						</section>
						<section class="tsd-index-group">
							<section class="tsd-index-panel">
								<div class="tsd-index-content">
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Properties
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_angular2_input.wjitemtemplate.html#initialized" class="tsd-kind-icon">initialized</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_angular2_input.wjitemtemplate.html#isinitialized" class="tsd-kind-icon">is<wbr>Initialized</a></li>
										</ul>
									</section>
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Methods
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-method tsd-parent-kind-class"><a href="wijmo_angular2_input.wjitemtemplate.html#created" class="tsd-kind-icon">created</a></li>
										</ul>
									</section>
								</div>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Properties</h2>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="initialized" class="tsd-anchor"></a>
								<h3>initialized</h3>
								<div class="tsd-signature tsd-kind-icon">initialized<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">EventEmitter</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>This event is triggered after the component has been initialized by Angular, that is
										all bound properties have been assigned and child components (if any) have been initialized.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="isinitialized" class="tsd-anchor"></a>
								<h3>isInitialized</h3>
								<div class="tsd-signature tsd-kind-icon">is<wbr>Initialized<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Indicates whether the component has been initialized by Angular.
										Changes its value from false to true right before triggering the <b>initialized</b> event.</p>
									</div>
								</div>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Methods</h2>
							<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
								<a name="created" class="tsd-anchor"></a>
								<h3>created</h3>
								<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">created<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>If you create a custom component inherited from a Wijmo component, you can override this
													method and perform necessary initializations that you usually do in a class constructor.
													This method is called in the last line of a Wijmo component constructor and allows you
													to not declare your custom component's constructor at all, thus preventing you from a necessity
												to maintain constructor parameters and keep them in synch with Wijmo component's constructor parameters.</p>
											</div>
										</div>
										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
									</li>
								</ul>
							</section>
						</section>
					</div>