Angular 7 Full Tutorial <<< by jps sasadara >>>

-
Nice Video introduction ==>  https://www.youtube.com/watch?v=8sC55WKzJW4

 data pass ==> https://drive.google.com/file/d/1941l3yFwBYOYw2rLwvcnzCXTDbHaBwr4/view?usp=sharing






















Data binding , Interpolation and Property binding   ------->>  https://www.youtube.com/watch?v=QN6UbL92rLcrLc






















































































Adding custom HTTP Headers to requests


We can also add custom HTTP headers to our HTTP requests using the HttpHeaders class.

First create an instance of the HttpHeaders class and then set your custom HTTP header. For example:


const  headers = new  HttpHeaders().set("X-CustomHttpHeader", "CUSTOM_VALUE");

Next, you can send the GET request using:


this.customersObservable = this.httpClient.get("http://127.0.0.1:3000/customers", {headers});

Angular 7 cookies ==> https://www.npmjs.com/package/ngx-cookie-service

Converting JSON to String and String to JSON ==>  https://alligator.io/js/json-parse-stringify/

POP up Dialog ==> https://www.youtube.com/watch?v=tbSiZ8Qs9gI
                                 https://valor-software.com/ngx-bootstrap/#/modals

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Lifecycle sequence

After creating a component/directive by calling its constructor, Angular calls the lifecycle hook methods in the following sequence at specific moments:
HookPurpose and Timing
ngOnChanges()
Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values.
Called before ngOnInit() and whenever one or more data-bound input properties change.
ngOnInit()
Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.
Called once, after the first ngOnChanges().
ngDoCheck()
Detect and act upon changes that Angular can't or won't detect on its own.
Called during every change detection run, immediately after ngOnChanges() and ngOnInit().
ngAfterContentInit()
Respond after Angular projects external content into the component's view / the view that a directive is in.
Called once after the first ngDoCheck().
ngAfterContentChecked()
Respond after Angular checks the content projected into the directive/component.
Called after the ngAfterContentInit() and every subsequent ngDoCheck().
ngAfterViewInit()
Respond after Angular initializes the component's views and child views / the view that a directive is in.
Called once after the first ngAfterContentChecked().
ngAfterViewChecked()
Respond after Angular checks the component's views and child views / the view that a directive is in.
Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().
ngOnDestroy()
Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks.
Called just before Angular destroys the directive/component.
Video ==> https://www.youtube.com/watch?v=0KWQLFI8mFE
My git link ==> https://github.com/jpssasadara/AgLife

Bootstrap 4 dropped Glyphicons support. (see: https://getbootstrap.com/docs/4.0/migration/#components)
This means that you'll need to use some other icon font, like Font Awesome.

Quick start for Font Awesome

  1. Grab the script from the get started page
  2. Paste it in your <head>
  3. Start using! Search for the icons on FontAwesome.com
  4. Explore the docs to unleash the full potential of Font Awesome!
  5. https://fontawesome.com/icons
Example:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap + Font Awesome</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- display 4 class makes the font size increase -->
      <h1 class="display-4"><i class="fab fa-stack-overflow"></i></h1>
      <p>That was easy! <i class="far fa-thumbs-up"></i></p>
      <button type="button" class="btn btn-primary">Works also with buttons! <i class="fas fa-link"></i></button>
    </div>
  </body>
</html>

PROJECT COMPLETE ==> https://github.com/jpssasadara/web_Socket_Epic_POS_Final
------------------------------------  JPS SASADARA

Comments

  1. J P S SASADARAOctober 22, 2019 at 11:09 AM

    Life cycle --> https://pusher.com/tutorials/lifecycle-hooks-angular

    ReplyDelete
  2. J P S SASADARAOctober 23, 2019 at 5:03 AM

    How to pass data between routed components in Angular--->
    https://medium.com/ableneo/how-to-pass-data-between-routed-components-in-angular-2306308d8255

    ReplyDelete
  3. J P S SASADARANovember 27, 2019 at 9:59 AM

    https://www.codementor.io/theparam/angular-sharing-data-between-components-tw78psu75

    ReplyDelete

Post a Comment

Popular posts from this blog

Hibernate (Java) -- by jps sasadara

-
Image
HQL & JPAQuery for Springboot =>   https://drive.google.com/drive/u/1/folders/18KA0A0EKYmn6Z7auazNquPDaweqPQvHI               https://www.baeldung.com/jpa-join-types   (only if we want to write join query, but in HQL no need of using join  key word , if we can correctly implement the mapping classes ) Native SQL for Springboot => https://drive.google.com/drive/u/1/folders/17vdDhEXBKtbWpTkYUy5UcF_n_r2G-YDy      projects =>  https://drive.google.com/drive/folders/14x_9TeE5SZq6ECZqCmoBaGTgOUSssuqm?usp=sharing We can write plan SQL Query in hibernate using   session.createSQLQuery(sqlSearch); Eg-::  String sqlSearch = SQLVarList.MSSQL_DEVICEOPERATIONREPORT_SQL2 + where + orderBy;             Query querySearch = session.createSQLQuery(sqlSearch);             querySearch = setD...
Read more

Observer Design Pattern & RxJava & @Async

-
Image
  Observer Design Pattern According to GoF definition,  observer pattern  defines a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically. It is also referred to as the  publish-subscribe pattern . In observer pattern, there are many observers (subscriber objects) that are observing a particular subject (publisher object). Observers register themselves to a subject to get a notification when there is a change made inside that subject. A observer object can register or unregister from subject at any point of time. It helps is making the objects objects  loosely coupled . 1. When to use observer design pattern As described above, when you have a design a system where multiple entities are interested in any possible update to some particular second entity object, we can use the observer pattern The flow is very simple to understand. Application creates the concrete subject object. All...
Read more

JAVA uml Based cording <<< by jps sasadara >>>

-
                             COMPOSITION TUTORIAL The term  composition  is not unique to Java, composition is a concept of object-oriented programming. By now you should be familiar with the concept of  inheritance  - inheritance requires the use of the Java keywords  extends  or  implements . When your class inherits members from either a superclass or a superinterface, you can directly invoke or access those members. Consider the following code that demonstrates inheritance: class OperatingSystem {      void bootUp() { ... }      void shutDown() { ... } } class Computer extends OperatingSystem { } class TestMe {      public static void main(String args[]){          Computer c = new Computer();          c.bootUp();  ...
Read more