A while back, I posted about building a simple component in react. In this post, I’m going to go through building that same component in Angular 2 …

The component will look like below. There will be a parent component with 2 child components …

• Criteria. The search textbox and “go” button
• Results. The list of results
• Search. The overall component – the parent of Criteria and Results

Consuming component

The code of the consuming component is listed below …

import { Component } from "angular2/core";
import { SearchComponent } from "./search.component";

@Component({
  selector: "my-app",
  directives: [SearchComponent],
  template: `
    <search></search>
  `
})
export class AppComponent {}

• On line 2, we import the search component which is our top level component
• On line 6, we declare that we are going to use the search component in the component’s markup
• Finally on 8, we reference the search component, using it’s tag which will be search

#angular #component