Angular 6 - Components

• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts
• app.module.ts

Angular 6 New Features

• Updated Angular CLI, Command Line interface − New commands added, like ng-update to migrate from previous version to current version. ng-add to quickly add application features to make application a progressive web apps.
• Angular Element − Allows Angular Components to be published as Web Components which can then be used in any HTML page. Using Angular Element package, native custom elements can be created easily.
• Updated Angular Material − New Tree component added, mat-tree, a styled version and cdk-tree, a unstyled version, to represent a hierarchical structure like tree.
• Usage of RxJS, a reactive JS library
• Updated CDK, Component Development Kit − Supports creating custom UI elements without need of angular material library. Supports responsive web design layouts. Supports overlay packages to create pop-ups.

Angularjs Animation ( how to handle animation in Angularjs )

Angularjs Animation

 how to handle animation in Angularjs

Step1:

·         npm install @angular/animations@latest --save

Step2:

v  Next, in the /src/app/app.module.ts file, we add the import:

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

Step3: (app.module.ts)

@NgModule({

  // Other arrays removed

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    BrowserAnimationsModule

  ],

})

Step4: (app.component.ts)

import { trigger,state,style,transition,animate,keyframes } from '@angular/animations';

@Component({

  selector: 'app-root',

  template: `

  <p>I will animate</p>

  `,

  styles: [``],

  animations: [

   // Define animations here.

animations: [

    trigger('myAwesomeAnimation', [

        state('small', style({

            transform: 'scale(1)',

        })),

        state('large', style({

            transform: 'scale(1.2)',

        })),

        transition('small => large', animate('100ms ease-in')),

    ]),

  ]

  ]

})

Step5: (app.component.ts)

·         template: `

  <p [@myAwesomeAnimation]='state' (click)="animateMe()">I will animate</p>

  `,

·         styles: [`

  p {

    width:200px;

    background:lightgray;

    margin: 100px auto;

    text-align:center;

    padding:20px;

    font-size:1.5em;

  }

  `],

·         export class AppComponent {

  state: string = 'small';

  animateMe() {

        this.state = (this.state === 'small' ? 'large' : 'small');

  } }

Step6:

·         transition('small <=> large', animate('300ms ease-in', style({

          transform: 'translateY(40px)'

        }))),

Step7:

·         transition('small <=> large', animate('300ms ease-in', keyframes([

          style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),

          style({opacity: 1, transform: 'translateY(35px)',  offset: 0.5}),

          style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})

        ]))),

Angularjs with Nodemailer contact form

Step 1- Create an AngularJS form in a view

Step 2- In your AngularJS controller, use a $http request to send your data to your Express Route

'use strict';

angular.module('core').controller('ContactFormController', ['$scope', '$http', '$mdToast', '$animate',

    function($scope, $http, $mdToast, $animate) {

// Expose view variables

        $scope.toastPosition = {

            bottom: false,

            top: true,

            left: false,

            right: true

        };

        $scope.getToastPosition = function () {

            return Object.keys($scope.toastPosition)

                .filter(function (pos) {

                    return $scope.toastPosition[pos];

                })

                .join(' ');

        };

        this.sendMail = function () {

            var data = ({

                contactName : this.contactName,

                contactEmail : this.contactEmail,

                contactMsg : this.contactMsg

            });

            // Simple POST request example (passing data) :

            $http.post('/contact-form', data).

                success(function(data, status, headers, config) {

                    // this callback will be called asynchronously

                    // when the response is available

                    $mdToast.show(

                        $mdToast.simple()

                            .content('Thanks for your message ' + data.contactName + ' You Rock!')

                            .position($scope.getToastPosition())

                            .hideDelay(8000)

                    );

                }).

                error(function(data, status, headers, config) {

                    // called asynchronously if an error occurs

                    // or server returns response with an error status.

                });

        };

    }

]);

Step 3- ExpressJS Route as an API to call

'use strict';

module.exports = function(app) {

    // Root routing

    var core = require('../controllers/core.server.controller');

    app.route('/contact-form').post(core.sendMail);

};

 Step 4 - Send an email containing the data

'use strict';

var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport();

/**

 * Send an email

 */

exports.sendMail = function(req, res) {

    var data = req.body;

    transporter.sendMail({

        from: data.contactEmail,

        to: 'jai@gmail.com',

        subject: 'Message from ' + data.contactName,

        text: data.contactMsg

    });

    res.json(data);

};