How to generate angular components using CLI


Using Angular CLI we can quickly generate model class structure. Before that make sure you have

  1. npm
  2. angular CLI

preinstalled on your system. For better understanding of angular project structure I suggest the following post

Install CLI

If you already have the angular CLI installed , skip this step

npm install @angular/cli

Components

Angular Components are building blocks of angular projects. It can be a product list component, a submission form etc .We can easily generate components using CLI and it will generate all necessary templates , style files for us.

Generate component

Use the following command to generate component from the project root

ng g c component-name  // say productList

Don’t forget to visit the source code page

How to create and run angular project in easy steps


Using Angular CLI we can quickly create project with new command. Before that make sure you have

  1. npm
  2. angular CLI

preinstalled on your system. For better understanding of angular project structure I suggest the following post

Install CLI

If you already have the angular CLI installed , skip this step

npm install @angular/cli

Inline template and Style

Every Angular component have three parts, template, component itself and style. These are generally located in three separate files. Optionally we can use inline template and styles.

Create the project

For inline template driven project use the following syntax on your terminal

ng new project-name -it -is

For bigger projects I suggest standard option

ng new project-name

Run the project

To run the project use either npm or ng command.

npm start
ng serve -o

Don’t forget to visit the source code page

How to display list of data in Angular component template


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.

List of data

As in other languages a list of data can be stored using a list/array in Angular. So how do we display it in HTML ? Like we do in other JS framework Angular also do, but using ngfor.

In our example we had a list of data as follows

 this.list= ['DELL', 'HP', 'LENOVO', 'ACER'];

In the HTML template we can render it using *ngFor

<p *ngFor= "let brand of list">
    <button>{{brand}}</button>
</p>

Keep reading Angular posts

Conditionally place component in Angular


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.

conditional place component

In Angular we can place components conditionally, this can be done by

  • Create a property
  • use ngIf

First up all create simple property for enabling and disabling. It can be true or false property.

 enableFeature=flase

Now you can place ngif with in the any tag/component. In our case it is just a h1 tag.

<h1 *ngIf="enableFeature">{{'You slected ' + brandSelected}} </h1> 
What does this means ?

The heading will only show up if the enableFeature is set to true

Keep reading Angular posts

Linux mastery : pwd


In this series of mini posts I will teach you a Linux lesson every day, it can be command , tricks , how to. The post will cover for beginner to advanced level. Welcome to Linux terminal.

Follow us and start learning Linux today

pwd

pwd is command which return the current working directory. This command is helpful when doing projects and scripting tasks.

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

Linux : history of command


In this series of mini posts I will teach you a Linux lesson every day, it can be command , tricks , how to etc. The post will cover for beginner to advanced level. Welcome to Linux terminal.

Follow us and start learning Linux today

history

history is a Linux command fetch a list of commands used in terminal. You can specify number of commands want to display

$ history
$ history 5

Following Linux manuals may help you

Angularjs component styling Part III : conditionally bind class


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

Linux : accessing the BIOS clock


In this series of mini posts I will teach you a Linux lesson every day, it can be command , tricks , how to etc. The post will cover for beginner to advanced level. Welcome to Linux terminal.

Follow us and start learning Linux today

hwclock

hwclock is a command which provide hardware clock information. Hardware / BIOS clock works even when the system remain in shut down state.

$ sudo apt install locate

Following Linux manuals may help you