How to use jQuery in Angular 2

First install jQuery with NPM: npm install --save jquery

Update scripts key in your angular-cli.json to include jQuery

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
]

You should stop angular-cli and rerun it using ng serve.

Now jQuery is available globally in the application. Whenever you need to use just declare $ or jQuery at the top like so:

import { Component, OnInit } from '@angular/core';  
// import line is this one
declare var $:any;
//declare var jQuery: any;

export default class Random implements OnInit {  
  ngOnInit() {
    // $ will be availble
    console.log($);
  }
}

 

jQuery THIS trap in Angular 2

Because of the access scope for jQuery, you must be careful when you use the jQuery in the  Angular. such as for this code  :

resultList  :string[] = [];
       myarray  :string[] = ['s1','s2','s3'];

       ............
                this.resultList.push('testS1');
                jQuery.each( this.myarray, function( index, v ) {
                        this.resultList.push(  v );
                });
       ...............

The error you will get will be :
Cannot read property ‘push’ of undefined

Correct way is:

       resultList  :string[] = [];
       myarray  :string[] = ['s1','s2','s3'];

       ............
                this.resultList.push('testS1');
                let __mythis = this;
                jQuery.each( this.myarray, function( index, v ) {
                        __mythis.resultList.push(  v );
                });
       ...............

How to pass data via event from child to parent component in Angular 2

At the child, I have a boolean data want to send to parent if a function method is clicked. What should I do?

Parent code is here. (onChangeDone) to receive an output from the child component and it can trigger a method to receive the event from the child too:

HTML Tag:
...

<childcomp (onChangeDone)="onChangeD($event)"> </childcomp>

....

TS code part:

export class ParentComp {

 onChangeD( result: boolean ) {
        if ( result ) // data changed
          { }
        else { }
    }


...

At the child component, answer is @Output() and together with the EventEmitter:

export class ChildComp implements OnInit {

    @Output() onChangeDone = new EventEmitter<boolean>();
    .....

    clickButton(): void {
     .....
     this.onChangeDone.emit(true);
     ....
    }

How to input a data from parent to child component in Angular 2

At the parent  I have a flag is createOrUpdate want to be sent to child component, parent code is here :

HTML Tag:
...

<childcomp [createOrUpdate]="createOrUpdate" > </childcomp >

....

TS code part:

export class ParentComp {
    createOrUpdate: boolean = true; // true for create, false for update
...

At the child component, answer is @Input  and same named variable to catch the input:

export class ChildComp implements OnInit {

    @Input() createOrUpdate: boolean;
    buttonText: string = 'Create New Car';
...
    ngOnInit() {
        if (this.createOrUpdate)
            this.buttonText = 'Create New Car';
        else this.buttonText = 'Update Car';
    }
....

 

How to create GUID or UUID in angular 2

There is a tool called angular2-uuid can do this:

npm install angular2-uuid --save

And in your code you can use it.

import { UUID } from 'angular2-uuid';
...
let uuid = UUID.UUID();

Angular – How to pass data by the router link

Refer to google page of https://angular.io/docs/ts/latest/guide/router.html#!#navigate ,

I just give a myself example to show how it works. This is a master component that wswapill guide the router to a component link of  /itemdetail  and together pass one object – this.selectedItemObj to next page. (selectedItemObj  could contain the itemName, id, etc. inside.)

import { Router} from '@angular/router';
....constructor(
        private router: Router
    )...
....this.router.navigate( ['/itemdetail', this.selectedItemObj] );
...

And then  at the target component, we can try to get the router link parameters at the init stage to initialize the data:

import { ActivatedRoute, Router, Params } from '@angular/router';
...
constructor(
        private route: ActivatedRoute,
        private router: Router
    ) {... }
...
ngOnInit() {
        this.route.params.subscribe(
            params => {
                this.itemName = params['itemName'];
                this.item = + params['id'];
                // TODO, you can call your service to get more data based on the ID or name 
                   ...
                });
..........

If you do not need to do too much things after you get the params data, you can use the switchMap to do a simple service call before subscribe, refer to google link for the example there.

CentOS 7 firewall basic

Wayne Zh

CentOS using firewalld ( not iptables) as firewall. It is a zone based firwall. By default, your network interface’s subnet will be add to trusted zone. You can use these command to check the status and setttings:

sudo systemctl status firewalld

sudo firewall-cmd --list-all-zones

Basic control and start

sudo systemctl disable firewalld
sudo systemctl enable firewalld
sudo systemctl start firewalld
sudo systemctl stop firewalld

If you want to add a subnet to trusted zone:

sudo firewall-cmd --permanent --zone=trusted --add-source=192.168.101.0/24
sudo firewall-cmd --reload
sudo firewall-cmd --list-all-zones