LK-TECH Academy

Last chapter we have discussed how we can share data between two unrelated components using behavioral subjects in Angular 8. Today I am going to explain how you can make an interaction between parent and child component using Angular. Before moving forward, I will generate one component in my flower store angular app. Flower store is the app we used to demonstrate the angular concept talked in series of chapters in this blog.  To generate the component, please run below ng CLI command in your command prompt.  ng g c flower-card Above command will generate the flower-card.component.ts and corresponding html and CSS files as below. Angular Related Articles: 1.  How to set up Angular environment 2.  How to create Angular project 3.  How to generate component and define routings in Angular 4.  Adding styles to your Angular App 5.  Angular NgFor directive and trackby 6.  Getting Started With PrimeNG Styling in Angular App 7.  PrimeNG UI Comp...

  Today I am going to talk about how we can make interaction between two different components in angular. There are two main approaches that we can follow. 1. If the two components are not relative, then you can use behavioral subjects to share data and trigger the event in one component, based on the value change in another component. 2. If the component is a child component of another component, then you can share data using @Input and @output directives Today in this chapter we will discuss on the first approach. How you can use Behavior subject to share between two components.  The BehaviorSubject holds the value that needs to be shared with other components. I will explain the concept using our flower store app. First, I will add PrimeNG text filed to the app.component.html file. To add the text field you have to import it in app.module.ts and also in app.component.ts file import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from ...

  Getting Started With PrimeNG Styling in Angular App This chapter I am planning to show how you can handle events of the checkboxes. For that I will use checkbox for every card to place the order.  To use PrimeNG checkboxes you have to import checkbox module in app.module.ts file. import {CheckboxModule} from 'primeng/checkbox'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LandingComponent } from './modules/landing/landing.component'; import { HomeComponent } from './modules/home/home.component'; import { CardModule } from 'primeng/card'; import {CheckboxModule} from 'primeng/checkbox'; @NgModule({ declarations: [ AppComponent, LandingComponent, HomeComponent ], imports: [ BrowserModule, AppRoutingModule, CardModu...

Getting Started With PrimeNG Styling in Angular App  This chapter we are going to check how you can add PrimeNG card component to show available flowers in the stock. Before styling the app, I have added some images of flowers to our assets folder as below. In app.module.ts file you can import PrimeNG Card module as below. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LandingComponent } from './modules/landing/landing.component'; import { HomeComponent } from './modules/home/home.component'; import { CardModule } from 'primeng/card'; ; @NgModule({   declarations: [     AppComponent,     LandingComponent,     HomeComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     CardModule,        ],   provider...

  This chapter I am going to explain how you can do the styling to our flower store app. There are different kind of CSS frameworks you can use to style you app. Such as: 1.        Angular Material 2.        ngx-bootstrap 3.        NG bootstrap 4.        Prime NG   I am planning to use PrimeNG styling framework to style our flower store app. PrimeNG has more than 80 UI component and it is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License.   How to Install Prime NG 1.     Run   npm install primeng –save  inside your root folder.                    2.        Run npm install primeicons –save to install prime icons. 3.        Run npm ...

  Blogger is very powerful and widely used blogging platform developed by Google Inc. You can create very attractive and user-friendly blogs using Blogger platform almost zero cost. Blogger can be easily connected with Google AdSense to monetize your blog. Due to simplicity and overall performance of the Blogger platform, many tech guys use this platform to create their technical blogs. If you want to add programming language code snippet into Blogger, many users face issues. Since you can’t simply copy and paste or type code snippets into edit post page. Not like normal text, code snippets should be well formatted and apply correct color combinations to have good look and feel to the readers. Different programming languages use different formats and different color combinations like this. In this post I will introduce easy method to add code snippet into your blog post while you are editing your post itself. There are two methods you can use; you can include your code snipper into...

Today we will learn about NgFor one of the core directive of angular. NgFor helps to build list and tables in Angular   Let us see the example in our flower store app. In the landing page I am going to print list of flowers that are available in the store. Later we will add images and show them in a carousel to rotate automatically. First we will create the domain class called flower.ts and you can copy paste below code.  export class flower{ constructor() { } name:string=''; price:number = 0; availableQuantity:number = 0 } To use this domain class inside another component you must specify export keyword along with the class keyword. Flower domain has 3 attributes to store name of the flower then price and the available quantity. Now we can create the array from the flower type as below inside the landing.component.ts file. myFlowerList:flower[]=[]; I will call a method inside ngOnInit to add values to the array as below. ngOnInit is one of ...