Posts

Showing posts from 2019

Child to parent component communication in angular 8

-
Parent component to child component interaction Child1 Component child1.component.ts => import  {  Component ,  OnInit ,  Output ,   EventEmitter  }  from   '@angular/core' ; @ Component ({   selector:  'app-child1' ,   templateUrl:  './child1.component.html' ,   styleUrls: [ './child1.component.css' ] }) export   class   Child1Component   implements  OnInit {   @ Output ()  public  childUsername  =   new   EventEmitter ();    fireEvent (){      this . childUsername . emit ( 'Hey! This is the Child component' );   }    constructor () { }    ngOnInit () {   } } child1.component.html => < div   class = "text-danger bg-success text-right mt-2 mb-2" ...
Post a Comment
Read more

Parent to child component communication in angular 8

-
Parent component to child component interaction Parent Component parent.component.ts => import  {  Component ,  OnInit  }  from   '@angular/core' ; @ Component ({   selector:  'app-parent' ,   templateUrl:  './parent.component.html' ,   styleUrls: [ './parent.component.css' ] }) export   class   ParentComponent   implements  OnInit {  username :any   =   'this is the parent child' ;    constructor () { }    ngOnInit () {   } } parent.component.html => < div   class = "text-center  bg-primary text-white p-1 m-2" >    < H3 > PARENT TO CHILD COMPONENT COMMUNICATION  </ H3 >    < app-child   [uname] = 'username' >   </ app-child > </ div > ...
Post a Comment
Read more

Creating Custom Pipes in Angular

-
Custom Age Pipe with source code implemetation==>   Create age pipe in pipes fder by following command in command terminal ng g p pipes/age age.component.ts => DateOfBirth =   new   Date ( '01/07/1990'  ); age.pipe.ts => import  {  Pipe ,  PipeTransform  }  from   '@angular/core' ; @ Pipe ({   name:  'age' }) export   class   AgePipe   implements  PipeTransform {    transform (value :   any ) :   any  {      console . log ( "print age pipe = "   +   value );      let   currentDate :any   =   new   Date (). getFullYear ();  // 2019      let   birthYear :any   =   new   Date ( value ). getFullYear ();      let   ageofMan :any   =    currentDate   - ...
Post a Comment
Read more

How To Delete A Component In Angular

-
Steps to delete a component in Angular Remove the import line reference from Angular  app.module.ts  file. Remove the component declaration from @NgModule declaration array in  app.module.ts  file And then manually delete the component folder from Angular project. Finally Delete all the references of component manually from the Angular project. In Angular CLI,there is no command available to delete a component created by Angular CLI as of now. There is no ng delete component command as part of Angular CLI.
Post a Comment
Read more

How to Create Shareable Download Links for Google Drive Files

-
First get sharable link grom google Drive , by right click on that file, you will get link like below:  drive.google.com/open?id=111111111 111111111 is the sample fileid. you have to convert this link to like: https://drive.google.com/ uc?export=download&id =111111111  In above line we just replaced  open?id by  uc?export=download&id   
Post a Comment
Read more

Show/Hide DIV onRadio Buttons

-
<div class="container"> <p>Click to open div on radio button  </p>   <label class="radio-inline"><input type="radio" name="tab" value="igotnone" onclick="show1();" /> None</label>   <label class="radio-inline"><input type="radio" name="tab" value="igottwo" onclick="show2();" /> Two</label> <div id="div1" class="hide">   <hr><p>Okay Cool! Here is the DIV1...</p> <div class="card" style="width:400px">     <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">     <div class="card-body">       <h4 class="card-title">John Doe</h4>       <p class="card-text">Some example text...
Post a Comment
Read more

pass value from one php page to another using session

-
page1.php     //store value in session <?php session_start(); $_SESSION['myValue1']=$_GET['cctnspsid']; $_SESSION['myValue2']=$_GET['dairyDate']; $_SESSION['myValue3']=$_GET['srno']; ?> page2.php   // use session value in another page <?php session_start(); echo $_SESSION['myValue1']; session_destroy(); ?>
Post a Comment
Read more

How to clear all input fields and error messages in bootstrap modal when clicking data-dismiss button?

-
 $(document).ready(function(){     $('.modal').on('hidden.bs.modal', function (e) {       $(this)       .find(" input[type=text], textarea,select").val('').end()         .find("input[type=checkbox], input[type=radio]").prop("checked", "").end()         /*remove error field when modal close     */         .find(".has-error").removeClass("has-error").end()     .find(".has-success").removeClass("has-success").end()     .find(".FeRror").empty().end();         })     })
Post a Comment
Read more

clear all error and success div from the input and select fields by jq

-
function resetData(){ $("#selectorId").find(".has-error").removeClass("has-error"); $("#selectorId").find(".has-success").removeClass("has-success"); $("#selectorId").find(".FeRror").empty(); } /////////////////////////// $('form[name="myform"] input:reset').click(function () {     $('form[name="myform"]')         .find(':radio, :checkbox').removeAttr('checked').end()         .find('textarea, :text, select').val('')           return false; }); //////////////////universe function/////////////// <button type="reset" class="btn btn-primary" onclick="resetDataCaseFrwrd(this)">Clear</button> function resetDataCaseFrwrd(obj){ $(obj).closest("form").find(".has-error").removeClass("has-error"); $(obj).closest("form").f...
Post a Comment
Read more

Could not find module “@angular-devkit/build-angular”

-
=========================================== You may try this one also==> npm install ng update and finally npm update
Post a Comment
Read more

error placement - remove "has-success" class if input field is empty and still green border occures

-
 unhighlight : function(element,errorClass, validClass) {                         if ($(element).parent().hasClass('has-error')) {                           $(element).parent().addClass("has-success").removeClass("has-error");                           $(element).next('.FeRror').css('display','none');                         }                                              //console.log($(element).val());                                            //console.log($(element).val() == "");       ...
Post a Comment
Read more

placement of Error Div of checkbox by Jqueryt

-
<form name="MovieSurvey" id="formId" action="page2.php" method="post">     <fieldset id="q8">         <legend class="Q8"></legend>         <label class="question">What are your favourite genres of movies?<span>*</span>         </label>         <div class="fieldset content">             <ul class="checkbox-grid">                 <li>                     <input type="checkbox" name="q8[]" value="Action">                     <label for="checkgenre[]">Action</label>                 </li>                 <li>            ...
Post a Comment
Read more

How to Add Bootstrap to an Angular CLI project

-
Image
Although the setup seems simple, I still get a lot of questions on how to setup an Angular project generated with Angular CLI with Bootstrap. So let’s see the step by step in the sections below. 1: Creating an Angular project with Angular CLI The first step is creating your Angular project using  Angular CLI . For this example we will use the following command: ng new angular-bootstrap-example 2: Installing Bootstrap from NPM Next, we need to install Bootstrap. Change the directory to the project we created ( cd angular-bootstrap-example ) and execute the following command: For Bootstrap 3: npm install bootstrap@3.3.7 For Bootstrap 4: npm install bootstrap 2.1: Alternative: Local Bootstrap CSS As an alternative, you can also download the Bootstrap CSS and add it locally to your project. I donwloaded Bootstrap  from the website  and created a folder  styles  (same level as  styles.css ):  Don’t place your local CS...
Post a Comment
Read more