Posts

To Do List Angular 13

Image
 app.component.html:- <input type = "text"   placeholder = "Enter Item to Add in List" #task >     <br/><br/>     <button (click) = " addItem ( task . value ) " > Add Item </button>   <br/><br/>   <ul *ngFor = " let item of listItems " >     <li> {{ item . name }} </li>         <button (click) = " itemRemove ( item . id ) " > Remove </button>   </ul>   app.component.ts:- listItems : any []=[]; addItem ( item : string ) {   console . warn ( item );   this . listItems . push ({ id : this . listItems . length , name : item }); } itemRemove ( id : number ) { console . warn ( id ) this . listItems = this . listItems . filter ( item => item . id != id ) } Output:-

Toggle Button in Angular 13

Image
app.component.html:    <button (click) = " toggle () " > Toggle </button>   <h1 *ngIf = " display " > Toggle Button Content </h1> app.component.ts: display = true ; toggle () { this . display =! this . display ; }

Forms in Angular 13

Image
  app.Component.html <form #basicForm = "ngForm" (ngSubmit) = " getFormData ( basicForm . value ) " >     <input type = "text" ngModel name = "userName" placeholder = "Enter You Name" /> <br/><br/>     <input type = "text" ngModel name = "email" placeholder = "Enter Your Email" /> <br/><br/>     <input type = "password" ngModel name = "password" placeholder = "Enter Password" /> <br/><br/>     <button> Submit </button>   </form>   <br/><br/>   <ul>     <li> {{ getFormDetails . userName }} </li>     <li> {{ getFormDetails . email }} </li>     <li> {{ getFormDetails . password }} </li>   </ul> app.component.ts: getFormDetails : any =[]; getFormData ( data : NgForm ) {   console . warn ( data ); this . getFormDetails = data ; }

Header in Angular 13

Image
 header.html:- <nav>     <img src = "https://www.adsrole.com/wp-content/uploads/cropped-AdsRole-Logo-PNG-Image2-2.png" >     <ul>         <li><a href = "#" > Home </a></li>         <li><a href = "#" > About </a></li>         <li><a href = "#" > Services </a></li>         <li><a href = "#" > Blog </a></li>         <li><a href = "#" > Contact Us </a></li>     </ul> </nav> ---------------------- Header.css:- nav img {     width : 200px ; } nav {     background-color : skyblue ;     padding : 20px ; } ul {     float : right ;     display : inline-flex ;     list-style-type : none ;     } ul li {     display : inline-block ;     padding : 10px ; } li a {     color : white ;     text-decoration : none ;     cursor : pointer ; }

Shopify Dynamic Meta Description

Shopify Dynamic Meta Description -    <title>    {{'general.title.search' | t}} {{search.results_count}} {{'general.title.search_results' | t}} "{{search.terms}}"  &ndash; {{ shop.name }}    </title>   {% endunless %}   {% if template == 'product' %}   <meta name="description" content="Shop {{ product.title }} online at just {{ product.price | money }} from Bawdy Bear. It is an online store, that offers funny gay shirts, jersey tank top mens, swim shorts, modern floor lamps, ladies tote bags,  teddy bear t shirt, cartoon bear backpacks, polyester outdoor blankets, printed flip flops for men, printed slippers for men, mens leather canvas boots, and much more. ">         {% else if page_description %}   <meta name="description" content="{{ page_description | escape | split: '[/countdown]' | last | strip_html }}">   {% endif %}  

Bhavesh Photos May 2019

Image