### File

`src/sample/sample.component.ts`

### Description

This is a sample component to demonstrate how components should be written, and can be used as a template for new components

### Implements

`OnInit` `AfterViewInit` `OnDestroy`

### Metadata

selector | `ibm-sample`

template

    <p>Hello, Carbon-Angular!</p>
    <span>{{ foo.required }}</span>

### Index

###### Methods

- Public doBar
- ngAfterViewInit
- ngOnDestroy
- ngOnInit
- Protected setFoo

###### Inputs

- foo

###### Outputs

- bar

### Constructor

`constructor(_elementRef: ElementRef)`
Defined in src/sample/sample.component.ts:29

instantiate services as protected variables

Parameters :

Name | Type | Optional
_elementRef | `ElementRef` | No

### Inputs

`foo` | foo is an input that takes a SampleInterface Type : `SampleInterface`
Defined in src/sample/sample.component.ts:27

### Outputs

`bar` | bar is an event that emits a SampleInterface `$event` Type: `EventEmitter<SampleInterface>`
Defined in src/sample/sample.component.ts:29

### Methods

Public doBar
`doBar(value)`
Defined in src/sample/sample.component.ts:54

this is an instance method that can be used in templates

Parameters :

Name | Optional
value | No

Returns : `void`

ngAfterViewInit
`ngAfterViewInit()`
Defined in src/sample/sample.component.ts:44
run setup logic that depends on the DOM here Returns : `void`

ngOnDestroy
`ngOnDestroy()`
Defined in src/sample/sample.component.ts:49
clean up any event handlers or other objects that won't normally be destroyed Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/sample/sample.component.ts:39
run setup logic that doesnt depend on the DOM and only needs to be run once here Returns : `void`

Protected setFoo
`setFoo(value: SampleInterface)`
Defined in src/sample/sample.component.ts:59

this is an instance method that can be inherited and used by subclasses

Parameters :

Name | Type | Optional
value | `SampleInterface` | No

Returns : `void`

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	ElementRef,
    	OnInit,
    	AfterViewInit,
    	OnDestroy
    } from "@angular/core";

    import { SampleBase } from "./sample-base.class";
    import { SampleInterface } from "./sample.interface";

    /**
     * This is a sample component to demonstrate how components should be written, and can be used as a template for new components
     */
    @Component({
    	selector: "ibm-sample",
    	template: `
    		<p>Hello, Carbon-Angular!</p>
    		<span>{{ foo.required }}</span>
    	`
    })
    export class Sample implements OnInit, AfterViewInit, OnDestroy {
    	/** foo is an input that takes a SampleInterface */
    	@Input() foo: SampleInterface;
    	/** bar is an event that emits a SampleInterface */
    	@Output() bar: EventEmitter<SampleInterface> = new EventEmitter<SampleInterface>();

    	/**
    	 * instantiate services as protected variables
    	 *
    	 * @param _elementRef
    	 */
    	constructor(protected _elementRef: ElementRef) {}

    	/** run setup logic that doesnt depend on the DOM and only needs to be run once here */
    	ngOnInit() {
    		//
    	}

    	/** run setup logic that depends on the DOM here */
    	ngAfterViewInit() {
    		//
    	}

    	/** clean up any event handlers or other objects that won't normally be destroyed */
    	ngOnDestroy() {
    		//
    	}

    	/** this is an instance method that can be used in templates */
    	public doBar(value) {
    		this.bar.emit(value);
    	}

    	/** this is an instance method that can be inherited and used by subclasses */
    	protected setFoo(value: SampleInterface) {
    		this.foo = value;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""