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

  • Npm
  • 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

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

  • Npm
  • 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

Angularjs component styling Part II : binding 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

  • NPM
  • 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

Angularjs component styling Part I


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

  • NPM
  • 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

TypeScript easy setup for Node project


Type script has been #1 choice for developing JavaScript application. It is rich with its features and types. TS is a super set of Java Script.

Programmers first write app in typescript and compiler can covert it to superior vanilla JavaScript.

Node and Typescript

In Nodejs developers can write app with TS which require some basic setup. The following package should be installed before the setup

  • typescript
  • ts-node
  • @types/node
  • nodemon
npm install typescript ts-node @types/node nodemon --save

Generate tsconfig

TypeScript settings for Node can be configured using a file tsconfig.json. As we we generate the package.jos we can create the tsconfig with tsc command

npx tsc --init

The file will come with lots of setting most of them are commented . We need to focus on few settings.

Important settings

   "outDir": "./dist",                  
   "rootDir": "./src",  
   "strict": true,  
   "moduleResolution": "node",  

The above settings should be configured which need to specify the root directory and output directory where we place the converted/compiled JS code.

The file structure we used in dist folder will be same as src except file type will be .js

The package.json scripts

, a sample script will look like this

  "scripts": {
   "start": "node dist/app.js",
   "dev":"nodemon src/app.ts",
   "build": "tsc -p ."
  }

configure your entry point script, it can be a app.js or index.js

Run , Action

Let’s run the script

dev

This script will run the script, not generated the js files yet

yarn dev

build

This will generate the js files in Dist folder and ready to start

yarn build

start

yarn start

This script meant to run the js file from dist folder

You may love to read following Typescript posts

How to read a text file in Deno


Deno is asynchronous JavaScript/TypeScript runtime. If you are not sure how and what’s of Deno, here is the links

Read a text file

Deno API allows developers to read files using readTextFile() which return a promise. A promise is similar to future in flutter, the result of the job will come in as a future.

You know that Deno is async by default, in the async world program continue working without interrupting other jobs.

const text = Deno.readTextFile("./data.json");
text.then((response) => console.log(response));

Here the text constant will return the resulted content in this operation.

To run this script yo may allow deno to use –allow-read permission.

deno run --allow-read maint.ts

All of my Deno projects will be published on my GitHub Repo, so keep watching.

How to create a text file in Deno


Deno is asynchronous JavaScript/TypeScript runtime. If you are not sure how and what’s of Deno, here is the links

Create a textfile

Deno API allows developers to write files using writeTextFile() which return a promise. A promise is similar to future in flutter, the result of the job will come in future.

You know that Deno is async by default, in the async world program continue working without interrupting other jobs.

const write = Deno.writeTextFile("./hello.txt", "Hello World!");
write.then(() => console.log("File written to ./hello.txt"));

Here the write constant will return result / only if the operation is succeeded.

To run this script yo may allow deno to use –allow-write permission.

deno run --allow-write maint.ts

All of my Deno projects will be published on my GitHub Repo, so keep watching.

Add records to SQL DB using command builder and dataset in C#


When I talk about C# Dataset quote that it can also be used for insertion of data into the table too. In this post, we are going to learn how to.

Prerequisites

  1. Data connection with SQL
  2. Dataset
  3. Command builder object

In our example, we had MiniPurchaseInfo table and dataset associated with it.  First thing first, the dataset

SqlDataAdapter MiniPurchaseInfo = new SqlDataAdapter("select * from minipurchaseinfo", con);
 MiniPurchaseInfoDataSet = new DataSet();
 MiniPurchaseInfo.Fill(MiniPurchaseInfoDataSet, "minipurchaseinfo");

We simply make the query, filling the information to the dataset and so on. The next step is to create a row with the DataRow object and add the data row to our dataSet object.

DataRow dro;

dro = MiniPurchaseInfoDataSet.Tables[0].NewRow();
 dro["entryno"] = entryNo;
 dro["supinvoice"] = txt_invoice.Text.ToString();
 dro["supid"] = SUPID;
 dro["netamount"] = net;

add the row to the dataset.

MiniPurchaseInfoDataSet.Tables[0].Rows.Add(dro);

The final step is to set up the command build which has the capability of insertion and deletion operations with DB adapter and dataset.

System.Data.SqlClient.SqlCommandBuildercmdbuilder = new System.Data.SqlClient.SqlCommandBuilder(MiniPurchaseInfo);

Set insert command of the adapter from the command builder object

MiniPurchaseInfo.InsertCommand = cmdbuilder.GetInsertCommand();

Call the update command of the adapter which will update the new row stored in the dataset into the database table.

int r = MiniPurchaseInfo.Update(MiniPurchaseInfoDataSet.Tables[0]);

The update will return a none zero value when the insertion performed.

Insert if not exist sqllite [android]


We are femiliar with if not exits keyword when working sqllite database in Android or in web applications as well.

If not exist work with create statements, so how do we implement the same tactics in insert statement ?

Here what I found ,

Take a look at what we have

Here I got a table Entries which keep track of different entries with auto grnerated eid column. I wanna make happends only insert entries that is not exist in the table.entries.pngTodo

  1. Create a unique index on ename column
  2. usere insert or ignore into statement instead of insert into
Index the colum
create unique index Entry_name_start on Entries ( ename ) ;

This will generate a intex on column ename, which means it can’t be duplicated

The new insert insert.png
insert or ignore into "Entries" (
    id,
    ename)
values (
    :id,
    :ename)
;

It will work….

Note: I used Android Studio and plugin called DB Browser in this tutorial