As we all know the Angular framework is arguably one of the most popular front-end frameworks out there right now.But topics such as: TypeScript, component, dependency injection, services, observable-based architecture like Rxjs, etc.Make its learning curve very hard to grasp.

This article will serve to give you a higher understanding on how Angular works by covering some of the basic aspects (components, template binding, data flows with inputs and outputs) which should be enough to get you started on the right foot.

What is an Angular app

An Angular application is in fact just a tree of components with the top level component being the app itself, which the browser renders when bootstrapping the app.

what_is_angular

Before we go any further I want to give credit to the ng-book: The Complete Guide to Angular 4 which inspired me to write this article so, if you like to get the full code examples and invest in your future as a developer I highly suggest that you read the book.

Components

Until now I have mentioned the word components quite a few times but without explicitly specifying what they represent. So, for me the best way you can picture components is by thinking about them as manners to teach the browser a new tag (HTML tags).
Components are the fundamental building block of Angular apps, they also have the ability to be composable, meaning that they give you the possibility to build larger components from smaller ones.

Component decorator

@Component decorator is where you can configure your component and how the outside world will communicate with it.Also gives metadata to the class that follows it (the controller).
Below is a very basic definition of a component(the following code is in: TypeScript):

@Component({
  selector: 'app-root',				
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

For this basic definition, we used three important keys: component selector, template and styles.

Selector key

The selector key is a way to say what element in the HTML will match this component.

<app-root></app-root>

or also as an attribute



<div app-root></div>


Template key

In the templateUrl option, we link the HTML template that we want this component to use.

Style key

In the styleUrls key, we put our CSS style sheets we want to style this component with.

Template binding

We call the syntax of {{...}} template binding and what we mean by it is to tell the view that we want to use the value of the expression inside the brackets at this location.
We can use it like this:

<!-- Variable -->


<h1>{{person.name}}</h1>


<!-- Expression -->


<h1>{{count+1}}</h1>


<!-- Function -->


<h1>{{myFunc(arg)}}</h1>


Inputs and Outputs

According to the folks behind the ng-book: The Complete Guide to Angular 4 one way to think about inputs and outputs is to imagine them as the method to define the public API of your component.
In Angular, we use inputs to pass data from the parent component into a child component and as far as the events flowing out from the component we need outputs to accomplish that for us.
How to use:

<!-- parent.component.html -->
<child-component [input_name]="value_parent" (action)="actionWasPerformed($event)">
  </child-component>

In the code above, what we want to say by [input_name_in_child] is to use the input_name of the child-component and for the "value_parent" we want to pass the value of the expression value_parent from parent-component.
How to define:

/* **********parent.component.ts************ */
import {
  Component,
  EventEmitter
} from '@angular/core';
@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
value_parent: number;
constructor() {
this.value_parent=10;
}
actionWasPerformed(msg: string): void {
    console.log('the received message is: ', msg);
  }
}//end of class

/* *********child.component.ts************* */
import {
  Component,
  OnInit ,
  EventEmitter ,
  Input ,
  Output
} from '@angular/core';
@Component({
  selector: 'child-component',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  value_to_send: string;
  // define the input 
@Input() input_name: number;
  // define the output instance
  @Output() action: EventEmitter <string> ;
  constructor() {
    // initialization of the action output
   this.action= new EventEmitter();
   this.value_to_send='msg from the child component :D';
  }
  actionFunc (): void {
    // emit the string on our output
    this.action.emit(value_to_send);
  }
}//end of class

Wrapping up

I hope that you find this article helpful as it is the first article in a series of articles with the title of Angular Fundamentals which will aim to help you get the most of your Angular learning journey.
If you enjoyed the post and want to show appreciation to the writer and the blog as a whole, just subscribe to our newsletter to stay updated with our content and share, like and follow us on social media (links below in the footer).
Take Care !! Until we meet again in another post from TechTalko.

ng-book. The in-depth, complete, and up-to-date book on Angular 4. Become an Angular 4 expert today.

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.