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

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

Dependency Injection in Drupal 8

Here are the important nuggets: DI is a design pattern used in programming. DI uses composition. DI achieves inversion of control. Dependency == service that your class needs == object of a certain type. Inject == provide == compose == assemble. Container == service container == dependency container. Instead of using  \Drupal::service('foo_service') , get the service from the  $container  if using a class. And the important reasons: Externalizing dependencies makes code easier to test. It allows dependencies to be replaced without interfering with other functionality. Retrieving dependencies from the container is better for performance. Services: node.grant_storage The easiest examples to find are services that have arguments, because you can search *.services.yml files for the word "arguments". In  node.services.yml  for example, there is this entry: node.grant_storage: class: Drupal\node\NodeGrantDatabaseStorage argument...
Post a Comment
Read more

How to span column of custom table in Drupal

If you want to span the column of custom drupal table like below image, Follow the below code to make the header of the table , <?php $header = array('S.N','District', array('data' => '<div class ="house">Household </div><br><span>Rural</span> <p>Urban</p>','colspan' => 2), array('data' => '<div class ="house">Members</div> <br><span>Rural</span> <p>Urban</p>','colspan' => 2), 'Duplicate/Failed Registration', array('data' => '<div class ="house">Pending De duplication </div><br><span>Rural</span> <p>Urban</p>','colspan' => 2), 'Non Un-organised Workers', 'SSID Generated', 'No. of Card Personlised', ); $rows[] = arra...
1 comment
Read more