How to increase Angular UI with Rxjs ?

Image for post
Image for post

Overview

What’s Observable and Rxjs ?

ng g c product /// for generate component 
ng g s product /// for generate service
/**
* product service
* for selected item and return sample data
*/
@Injectable({
providedIn: 'root'
})
export class ProductService {

/**
* @ignore
*/
constructor() {
}

/**
*
* @param food:get Food data and return with 2000 delay to simulate request
*/
selectedFood(food: FoodItem): Observable<any> {
return of({
...food
}).pipe(delay(2000));
}

/**
* getItemProduct method to return sample repsonse
*/
getItemProduct(): Observable<FoodItem[]> {
return of([
{
id: 0,
name: 'Taco Pizza',
image: 0,
ingredient: 'A Quad Cities original : taco-seasoned crumbled sausage, red sauce, mozzarella, and cheddar. Topped with lettuce, tomatoes, and taco-seasoned chips.',
price: '1000',
},
{
id: 1,
name: 'Sausage Pizza',
image: 1,
ingredient: 'The Quad Cities specialty : crumbled sausage, Roots pizza sauce, and mozzarella.',
price: '2000',
},
{
id: 2,
name: 'Rick Ortiz’s Antique Taco Chili Cheese Curd Pizza',
image: 2,
ingredient: 'Chorizo chili, cheddar curds, Chihuahua cheese, mozzarella, pickled jalapeños & onions, avocado cream, tortilla strips, black olives, and scallions.',
price: '2000',
}
]);
}
}
/**
* product component class
* to handler click and call service
*/
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit, OnDestroy {
/**
* a subject for start new observable
*/
foodObservable: Subject<any> = new Subject<any>();
/**
* status of food
*/
statusFood = FoodStatus;
/**
* item list
*/
itemList: FoodItem[];

/**
*
* @param productService:For use product service
*/
constructor(private productService: ProductService) {
}

/**
* In the first rendering we create an observable to start
*/
ngOnInit(): void {
this.getProductItem();
this.foodObservable.pipe(
tap((food: FoodItem) => {
this.itemList.forEach((item: FoodItem) => {
if (item.id === food.id) {
item.status = FoodStatus.Loading;
} else {
item.status = null;
}
});
}),
switchMap((food: FoodItem) => {
return this.productService.selectedFood(food);
}),
tap(() => {
this.itemList.forEach((item: FoodItem) => {
item.status = null;
});
})
).subscribe((result: FoodItem) => {
this.itemList.forEach((item: FoodItem) => {
if (item.id === result.id) {
item.status = FoodStatus.Successful;
} else {
item.status = null;
}
});
});
}

/**
* get product item from service
*/
getProductItem(): void {
this.productService.getItemProduct().subscribe((data: FoodItem[]) => {
this.itemList = data;
});
}

/**
* get food item from template and call next foodObservable
* @param item:food item
*/
handlerClick(item: FoodItem): void {
item.selected = true;
this.itemList.forEach((foodItem) => {
if (foodItem !== item) {
foodItem.selected = false;
}
});
this.foodObservable.next(item);
}

/**
*
* @param index:index
* @param food:food item
*/
trackByFoodId(index: number, food: FoodItem): number {
return food.id;
}

/**
* for unsubscribe the observable to clean it after done.
*/
ngOnDestroy(): void {
this.foodObservable.next();
this.foodObservable.complete();
}
}
Image for post
Image for post
Image for post
Image for post

Front-end Developer , mountain and astronomy lover

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store