Skip to main content

Angular 6/7 basic commands

To set up a new project in angular

Download the angular code:

 npm install -g @angular/cli

install the project
ng new project_name
ng serve --open --port 42001

ng generate component home
ng generate service hero

Add Bootstarp 4 in Angular 7

 1- npm install bootstrap --save
 2- Add css in angular.json file in styles array key ( "node_modules/bootstrap/dist/css/bootstrap.min.css" )
 3- Hit ng serve 

Download and run Angular Project in local machie: 

git clone https://github.com/angular/quickstart.git quickstart
npm install (It will download the required modules according to the package.json)
npm start or ng serve


Live reload not working when change code,  then use

sudo ng serve --port 4203

How to use Subscribe in angular when deal with http client with GET/POST

menus: Topmenu[] = [];
constructor( private TopmenuService:TopmenuService) { }

ngOnInit() {
this.getHeaderMenus();
}

getHeaderMenus(): void {
console.log('fire function');
this.TopmenuService.getHeaderMenus()
.subscribe(
(data:Topmenu[]) => this.menus = data
);
}

here , http client return data in the form of observables to use it we use the subscribe function, subscribe function comes with data so here,
(data:Topmenu[])

data in the form of  Topmenu array , and then assign the data to the  this.menus
now menus will use as an array in the html file,

Comments

Post a Comment

Popular posts from this blog

Drupal 8 : Link actions,Link menus,Link Tasks,Routings

Drupal 8 : Link actions,Link menus,Link Tasks,Routings Link actions Local actions have also been moved out of the hook_menu() system in Drupal 8 .Use actions to define local operations such as adding new items to an administrative list (menus, contact categories, etc). Local actions are defined in a YAML format, named after the module they are defined by. Such as menu_ui.links.action.yml for this example from menu_ui module: menu_ui.link_add:   route_name: menu_ui.link_add   title: 'Add link'   appears_on:     - menu_ui.menu_edit Here, menu_ui.link_add: It is the Unique name of the link action Most likely start with module name, route_name : Name of the route it means when click the link it redirect to this route, appears_on :  An array of route names for this action to be display on. Now how to know the Route name of any internal/external admin pages like below, By through the drupal console we achieve it, drupal debug:router...
Post a Comment
Read more

Mysql Interview Questions

Current mysql version : 8 ( last was 5.7 ,  5.7 to directly 8 ) SHOW FULL PROCESSLIST is used to see all the query executing when refresh the site. 1 second == 1000 mili second, 0-500 ms responce time of any query is ok How to Read the MySQL Slow Query Log :   The MySQL slow query log is where the MySQL database server registers all queries that exceed a given threshold of execution time. This can often be a good starting place to see which queries are slowest and how often they are slow. MySQL on your server is configured to log all queries taking longer than 0.1 seconds. /var/log/mysql/mysql-slow.log Use EXPLAIN or EXPLAIN EXTENDED to explain the query how it is executed. MySQL  describe  or  ANALYZE  command shows the structure of the table. Best practice in respect of performance : 1 - always use index, 2 - index types , primary index and combined field index like fname & lname in one index not two index, 3 - one index sc...
Post a Comment
Read more

Get The field values of node in Drupal 8

use Drupal \ node \ NodeInterface ; /** * Implements hook_ENTITY_TYPE_insert() for node entities. * * This tests saving a node on node insert. * * @see \Drupal\node\Tests\NodeSaveTest::testNodeSaveOnInsert() */ function node_test_node_insert ( NodeInterface $node ) { // Set the node title to the node ID and save. if ( $node - > getTitle ( ) == 'new' ) { $node - > setTitle ( 'Node ' . $node - > id ( ) ) ; $node - > setNewRevision ( FALSE ) ; $node - > save ( ) ; } } Now There is so many functions are there to get the values, For All the functions available visit the API code, https://api.drupal.org/api/drupal/core%21modules%21node%21src%21NodeInterface.php/interface/NodeInterface/8.2.x Some of as below, Node edit form, Drupal 8 Automatically Load the whole object no need to load the entity like below, if ($event->getFormId() == 'node_alexa_audio_clips_edit_form') { $node = \Drupal::ro...
Post a Comment
Read more