Building a simple component in Angular 2

Building a simple component in Angular 2

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 …

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

search results components

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Angular Components and Their Types

In this article, you will get to know about all the various components present in the angular application by default and how you can add or remove components.

Angular Architecture Components and Features

Learn about Angular Architecture and its components like Module, Template, Component, Metadata, Data Binding, Services, Directives and Dependency Injection

Agnostic components in Angular

When you’re building a reusable components library, API is very important. Learn how to make components that work with everything and look like anything!

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc