Component interaction in Angularjs – Part I


In Reactjs we used props to pass values to pass data to components , mean time Angularjs has different method for sharing data among components.

Angular used TypeScript, so better to learn some basics, almost everything in TS is same as JS does, with some changes. It is a superset of JS.

In this post we will discuss parent to child interaction.

Angular component and any custom component can pass property to another component. It didn’t send data directly, instead the data is stored in the parent class.

In our example we had a list component which is used to display a set of watch brands. The data is stored in the root component class.

The Project Structure

Angular Project Structure
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'BrnadComponent';
  blockTitle = 'Brands';
  blockData = ['ROLEX', 'SEIKO', 'FOSSIL', 'HUWAEI'];
}
//Template
<div>
  <H2>Property Binding Example</H2>
  <app-list [title]="blockTitle" [list]="blockData" ></app-list>
 
</div>

Receiving the data

We can get the data from the parent component ( app.component) using input (@Input) decorator function.

  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
    @Input() public title:any;
    @Input('list') public brands:any;
  
  constructor() { 
 
  }

  ngOnInit(): void {
  }

Note that The data shared by the parent component ( blockData) is accepted as brands not blockData. We used an alias instead the property, this will help us to solve conflict among property and shared properties.

You can use the function with or without aiias

Keep reading Angular posts

Angularjs component styling Part III : using ngClass


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster. The initial setup for Angularjs require the following

  • NMP
  • Nodejs
  • VSCODE
  • Angular CLI
  • TypeScript

Angular used TypeScript, so better to learn some basics, almost everything in TS is same as JS does, with some changes. It is a superset of JS.

The Project Structure

Angular Project Structure

With CLI command ng new <project-name> we can create Angular project on the top of Nodejs with above file structure

Binding style class

You have been noticed that every Angularjs component has a component.css. This is where place all your SASS/CSS styling classes and ids. We can also use the inline style in your component.ts file, if you prefer ( as an array).

ngClass allow us to define and apply set of Styles and properties to a component.

Define Object and property

In class definition declare property with class.

public isClicked = true;
  public btnSpecial = {
    "btn": !this.isClicked,
    "btn-clicked": this.isClicked,
    "btn- special":  this.isClicked

  };

Define CSS

In your app component.css file define a simple button class

 
.btn{
    background-color:rgba(51, 134, 243, 0.986);
    margin: 5px;
    padding: 4px;
    color: white;
    border: 1px;
    border-radius: 2px;
  
}
.btn-clicked {
  background-color: rgba(243, 153, 51, 0.986);  
  border-color: rgb(255, 0, 0);

}
.btn-special{
   border-style: double;
   border-block-start-color: aquamarine;
}

Bind

It is possible bind the style object we created to accommodate multiple style, using the ngClass as follows

<button [ngClass]="btnSpecial">OK</button>

Class binding has higher precedence in Angular, that means when we use the both methods only the binding will work. So both can’t be used.

I know the above example is minimal , you can experiment much more , first I suggest have a clear understanding about CSS. A project based tutorial may help you[You Tube/Udemy].

Keep reading Angular posts