Bytecode

Components Components are the very basic building block UI element in angular applications. They are directives with a special decorator (@Component) and template. Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated, and used at runtime. Below is an example of a basic component: import { Component } from '@angular/core'; @ Component ({ selector: 'hello-component', templateUrl: './hello-component.html', styleUrls: ['./hello-component.css'] }) class Greet { public name: string = 'Component'; } You can easily use this component anywhere in the application buys just including like this <hello-component></hello-component>. Component Life Cycle hooks Components can control their run-time behaviour by implementing various Life-Cycle hooks. The main life-cycle are following. ngOnChanges: Respond when Angular sets or...

NgModule is really a very important concept of angular. And it helps to wire-up some important information for the compiler during run time. They are specially used for organizing the code into features, lazy loading routes, and creating reusable libraries. We're going to cover some important uses of NgModule with some examples. I assume you have some working knowledge of Angular. JavaScript Modules I want to clear that NgModules are completely different from modules in javascript (sometimes called ES6 module). They are simply a language construct that helps us to organize our code. For more information pls visit Javascript Modules Let's dive into NgModule, the AppModule. Let's start looking at a basic NgModule that exists in every Angular application i.e AppModule  import { BrowserModule } from '@angular/platform-browser' ; import { NgModule } from '@angular/core' ; import { AppComponent } from './app.component' ; @ NgModule ( { ...

Hi! Today I'll talk about the important topic call, apply, and bind. These javascript methods allow us to change the value of this  for a given function. And I will try to make these concepts as simple as that with appropriate examples. Function.prototype.call() The method invokes the function and allows us to one by one using commas.  var testArgument = { firstName : "John" , lastName : "Smith" , age : 24 , profession : "Developer" }; function testFunction ( text ) { console . log ( "value of this" , this ); console . log ( "value of text" , text ); } testFunction . call ( testArgument , "hello" ); // output /* value of this {firstName: "John", lastName: "Smith", age: 24, profession: "Developer"} value of text hello */ you call also pass array or string var testArgument = "String" function testFunction ( text ) { console . log ( "value of thi...

Hi, all techies today we are going to discuss the react's important hook useImperativeHandle. What it solved for me When I was working on a react-native project, there was a situation when I have to toggle the modal view. So for that, I just took another boolean state in the parent component and changed it. import React , { useState } from 'react' ; import { Pressable , Text , View } from 'react-native' ; export const ParentComponent = ( props : any ) => { const [ showModal , setShowModal ] = useState < boolean >( false ); const toggleModal = ( value : boolean ) => { setShowModal ( value ); } return < View > < Pressable onPress = { () => toggleModal ( true ) } >< Text > Show Modal </ Text ></ Pressable > { showModal && < ModalComponent /> } </ View > } But because as we know whenever we change the state of the component it gets rerender wh...