Create component in angular

• Right click on App Folder under explorer. then click on Generate Component

•  Then enter Component name then click on enter button as below image.

• It will create about folder and under about folder it will create Component related files as below image.

• about.component.ts code as below

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-about',

  templateUrl: './about.component.html',

  styleUrls: ['./about.component.css']

})

export class AboutComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

• about.component.html code as below

<p>

  About component 

</p>

• Add about Component in app.module.ts file like below

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { AboutComponent } from './about/about.component';

@NgModule({

   declarations: [

      AppComponent,

      AboutComponent

   ],

   imports: [

      BrowserModule,

      AppRoutingModule

   ],

   providers: [],

   bootstrap: [

      AppComponent

   ]

})

export class AppModule { }

• Include about component in app.component.html page like below.

<h1>Welcome to Angular Test project</h1>

<h2>Hi</h2>

<app-about></app-about>

Output:

Angular important concepts

• Modules
• Components
• Templates
• Metadata
• Data Binding
• Directive
• Services
• API Calls
• Routing
• Reactive forms
• Dependency Injection
• Authentications

Reusable button component react native example

• Create Components folder under src folder

• Add button Reusable component ButtonCOM.js file and add below Code

import React from "react";

import { Button } from "react-native";

const ButtonCOM = ({ title, decreaseCount }) => {

  return <Button onPress={decreaseCount} title={title} />;

};

export default ButtonCOM;

• Use Reusable button component  in followed file ButtonEXP1.js file and add below Code

import React from "react";

import { Button, View, Text } from "react-native";

const callFun = () => {

  alert("Clicked on Button!!!");

};

const ButtonEXP1 = () => {

  return (

    <View>

      <Text> Reusable button component react native example</Text>

      <Button onPress={callFun} title="Test Button" color="#0000FF" />

    </View>

  );

};

export default ButtonEXP1;

• Open App.js file and update code as below\

import React from 'react';

import { View,StyleSheet } from 'react-native';

import ButtonEXP1 from './src/components/ButtonEXP1'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <ButtonEXP1/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

Complex Conditionally applying CSS classes in react js

• Create Components folder under src folder
• Add CSScomplexconditions.js file and add below Code

import React, { Component } from "react";

import "./CSScomplexconditions.css";

class CSScomplexconditions extends Component {

getClass(someInput) {

switch (someInput) {

case "1": {

return "class1";

}

case "2": {

return "class2";

}

case "3": {

return "class3";

}

}

}

render() {

return (

<div>

complex Conditionally applying CSS classes

<p className={this.getClass("2")}>Example Text</p>

</div>

);

}

}

export default CSScomplexconditions;

• Add CSScomplexconditions.css file and add below Code

.class1 {

background-color: red;

}

.class2 {

background-color: blue;

}

.class3 {

background-color: orangered;

}

• Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import CSScomplexconditions from "./components/CSScomplexconditions";

function App() {

return (

<div className="App">

<CSScomplexconditions />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Passing Method References Between Components Example in React

• Create Components folder under src folder
• Add PassingMethodReferencesBetweenComponent.js file and add below Code

import React,{Component} from 'react';

import Person from './Person';

class  PassingMethodReferencesBetweenComponent extends Component {

  state={

    Person:[

      {name:'adi',age:29},

      {name:'balu',age:30},

      {name:'krishna',age:28}

    ],

    otherState:'some other value'

  }

switchNameHandler=()=>{

this.setState({Person:[

    {name:'jc adi',age:29},

    {name:'balu',age:30},

    {name:'krishna',age:28}

  ]})

}

  render(){

  return (

    <div>

        <p>Passing Method References Between Components Example</p>

      <Person 

      name={this.state.Person[0].name} 

      age={this.state.Person[0].age}/>

      <Person 

      name={this.state.Person[1].name} 

      age={this.state.Person[1].age}

      click={this.switchNameHandler}/>

      <Person 

      name={this.state.Person[2].name} 

      age={this.state.Person[2].age}/>

    </div>

  );

  }

}

export default PassingMethodReferencesBetweenComponent;

• Add Person.js file and add below Code

import React from 'react';

const person =(props)=>{

    return(

        <div>

        <p onClick={props.click}>I'm a {props.name} and i am {props.age} years old!</p>

        <p>{props.children}</p>

        </div>

    );

}

export default person;

• Open App.js file and update code as below

import React from 'react';

import './App.css';

import PassingMethodReferencesBetweenComponent from './Components/PassingMethodReferencesBetweenComponent'

function App() {

  return (

    <div className="App">

     <PassingMethodReferencesBetweenComponent/>

    </div>

  );

}

export default App;

Output:

Reusable Image Button component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create ImageButton folder under common folder
• Add index.js file under ImageButton folder and add below Code

import React from "react";

import "./style.css";

const ImageButton = ({ id, source, altText, className, clickHandler }) => {

  return (

    <>

      <span onClick={clickHandler} role="button">

        <img id={id} src={source} alt={altText} className={className} />

      </span>

    </>

  );

};

export default ImageButton;

• Add style.css file and add below Code

.img {

  border: 1px solid #ddd;

  border-radius: 4px;

  padding: 5px;

  width: 150px;

}

• Go to Components Folder and Add ImageButtonEXP.js file and add below Code

import React from "react";

import ImageButton from "./common/ImageButton/index";

export default function ImageButtonEXP() {

  const clickHandler = e => {

    alert("Clicked on Image Button");

  };

  return (

    <>

      <ImageButton

        id={"img1"}

        altText={"my inage"}

        className={"img"}

        clickHandler={clickHandler}

        source={"http://allinoneweb.net/Including/Images/home/logo.png"}

      />

    </>

  );

}

• Open App.js file and update code as below

import React from 'react';

import ImageButtonEXP from './Components/ImageButtonEXP'

function App() {

  return (

    <div>

      <ImageButtonEXP/>

    </div>

  );

}

export default App;

Output:

Reusable Image component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create Image folder under common folder
• Add index.js file under Image folder and add below Code

import React from "react";

import "./style.css";

const Image = ({ id, source, altText, className }) => {

  return <img id={id} src={source} alt={altText} className={className} />;

};

export default Image;

• Add style.css file and add below Code

.img {

  border: 1px solid #ddd;

  border-radius: 4px;

  padding: 5px;

  width: 150px;

}

• Go to Components Folder and Add ImageEXP.js file and add below Code

import React from "react";

import Image from "./common/Image/index";

const IMAGES = [

  "http://allinoneweb.net/Including/Images/home/logo.png",

  "http://allinoneweb.net/Including/Images/home/logo.png",

  "http://allinoneweb.net/Including/Images/home/logo.png",

  "http://allinoneweb.net/Including/Images/home/logo.png",

  "http://allinoneweb.net/Including/Images/home/logo.png"

];

const ImageEXP = () => (

  <>

    {IMAGES.map(image => (

      <Image source={image} key={image} className={"img"} />

    ))}

    <Image

      id={"img1"}

      altText={"my inage"}

      className={"img"}

      source={

        "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"

      }

    />

  </>

);

export default ImageEXP;

• Open App.js file and update code as below

import React from 'react';

import ImageEXP from './Components/ImageEXP'

function App() {

  return (

    <div>

      <ImageEXP/>

    </div>

  );

}

export default App;

Output:

Reusable Dropdown component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create Dropdown folder under common folder
• Add index.js file under Dropdown folder and add below Code

import React from "react";

const Dropdowm = ({

  id,

  name,

  options,

  title,

  handleChange,

  selectedValue

}) => (

  <div>

    <h1>{title}</h1>

    <select id={id} name={name} onChange={handleChange} value={selectedValue}>

      {options.map(option => (

        <option key={option.value} value={option.value}>

          {option.label}

        </option>

      ))}

    </select>

  </div>

);

export default Dropdowm;

• Add style.css file and add below Code

// CSS Code here

• Go to Components Folder and Add DropdownEXP.js file and add below Code

import React from "react";

import Dropdown from "./common/Dropdown/index";

const options = [

  { label: "Location 1", value: 1 },

  { label: "Location 2", value: 2 },

  { label: "Location 3", value: 3 },

  { label: "Location 4", value: 4 },

  { label: "Location 5", value: 5 },

  { label: "Location 6", value: 6 }

];

class DropdownEXP extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      SeletedVal: ""

    };

  }

  handleChange = e => {

    var value = e.target.value;

    this.setState({

      SeletedVal: value

    });

  };

  render() {

    return (

      <div className="App">

        <Dropdown

          id={"ddl1"}

          name={"ddllocation"}

          options={options}

          title={"Locations"}

          handleChange={this.handleChange}

          selectedValue={this.state.SeletedVal}

        />

      </div>

    );

  }

}

export default DropdownEXP;

• Open App.js file and update code as below

import React from 'react';

import DropdownEXP from './Components/DropdownEXP'

function App() {

  return (

    <div>

      <DropdownEXP/>

    </div>

  );

}

export default App;

Output:

Reusable Textbox component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create Textbox folder under common folder
• Add index.js file under Textbox folder and add below Code

import React from "react";

import "./style.css";

const Textbox = props => {

  return (

    <input

      id={props.id}

      name={props.name}

      type={props.type}

      placeholder={props.placeholder}

      className={props.className}

      onChange={props.onChangeHandler}

      readOnly={props.isreadOnly}

      value={props.value}

    />

  );

};

Textbox.defaultProps = {

  type: "text",

  className: "txtStyle1",

  isreadOnly: false

};

export default Textbox;

• Add style.css file and add below Code

.txtStyle1 {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  display: inline-block;

  border: 1px solid #ccc;

  border-radius: 4px;

  box-sizing: border-box;

}

.txtStyle2 {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  display: inline-block;

  border: 1px solid #f00;

  border-radius: 4px;

  box-sizing: border-box;

}

• Go to Components Folder and Add TextboxEXP.js file and add below Code

import React, { useState } from "react";

import Textbox from "./common/Textbox/index";

const TextboxEXP = () => {

  const [txtName, settxtName] = useState("");

  const [txtEmail, settxtEmail] = useState("Default Data");

  const [txtPassword, settxtPassword] = useState("");

  return (

    <>

      <h3>Textbox reusable component example</h3>

      <Textbox

        id={"txtName"}

        name={"txtName"}

        type={"text"}

        placeholder={"Enter Name"}

        className={"txtStyle1"}

        isreadOnly={false}

        value={txtName}

        onChangeHandler={e => settxtName(e.target.value)}

      />

      <Textbox

        id={"txtEmail"}

        name={"txtEmail"}

        type={"text"}

        placeholder={"Enter Email"}

        className={"txtStyle1"}

        value={txtEmail}

        onChangeHandler={e => settxtEmail(e.target.value)}

      />

      <Textbox

        id={"txtPassword"}

        name={"txtPassword"}

        type={"password"}

        placeholder={"Enter Password"}

        className={"txtStyle2"}

        value={txtPassword}

        onChangeHandler={e => settxtPassword(e.target.value)}

      />

    </>

  );

};

export default TextboxEXP;

• Open App.js file and update code as below

import React from 'react';

import TextboxEXP from './Components/TextboxEXP'

function App() {

  return (

    <div>

      <TextboxEXP/>

    </div>

  );

}

export default App;

Output: