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 ...