Posts

Showing posts from February, 2020

React bootstrap React Table dropdown cell component

export function DropDownCell (props) { const [dropDownVal , setDropDownValue] = useState (props?. cellInfo ?.cell?. value ) ; useEffect (() => { if (props?. cellInfo ?.cell?. value && (dropDownVal !== props?. cellInfo ?.cell?. value )) { setDropDownValue(props?. cellInfo ?.cell?. value ) ; } } , [props?. cellInfo ?.cell?. value ]) ; const handleChange = (e) => { setDropDownValue(e. target . value ) ; props. updateHandler (props?. cellInfo ?. row ?. index , props?. cellInfo ?. column ?. id , e. target . value ) ; } ; return <div> <Form.Group className = { 'm-0' } > <Form.Control as = { 'select' } id = {props?. cellInfo ?. row ?. index + '_' + props?. cellInfo ?. column ?. id } value = {dropDownVal ? dropDownVal : '' } required = {props?. required } onChange =

ngclass angular 2,...,5,..,7 examples with conditions

Angular 2,..,7 provides several ways to add classes conditionally: type one [ class . my - class ]= "step=='step1'" type two [ ngClass ]= "{'my-class': step=='step1'}" and multiple option: [ ngClass ]= "{'my-class': step=='step1', 'my-class2':step=='step2' }" type three [ ngClass ]= "{1:'my-class1',2:'my-class2',3:'my-class4'}[step]" type four [ ngClass ]= "(step=='step1')?'my-class1':'my-class2'"