https://github.com/servrox/demo-interact-router

Angular 7 project, in which parent and lazy loaded components communicate via a service.
https://github.com/servrox/demo-interact-router

angular angular-7 angular-components angular-lazy-load angular-material angular-material-design angular-route angular-router-outlet angular-routing angular-service components-interaction lazy-loading router

Last synced: 2 months ago
JSON representation

Angular 7 project, in which parent and lazy loaded components communicate via a service.

• Host: GitHub
• URL: https://github.com/servrox/demo-interact-router
• Owner: servrox
• Created: 2019-01-31T23:49:52.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-31T23:50:18.000Z (over 6 years ago)
• Last Synced: 2025-01-26T10:09:39.043Z (4 months ago)
• Topics: angular, angular-7, angular-components, angular-lazy-load, angular-material, angular-material-design, angular-route, angular-router-outlet, angular-routing, angular-service, components-interaction, lazy-loading, router
• Language: TypeScript
• Homepage:
• Size: 74.2 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Demo: Parent and lazy loaded components 
 communicate via a service

![Live Demo](http://g.recordit.co/jtqXhonLRY.gif)

The parent is lazy loading tab-content (from different components) in his router outlet. 


In the parent also sits a loading-overlay component loaded from the core module (it isn't necessary to use a core module, this is just for a more beautiful structure). 


When in one of the components, which were loaded by a lazy module, a button is fired, the loading-overlay is activated for a given time. 


Start by checking out the app.component.html and one of the tab components.

![Router Tree](https://i.imgur.com/GFckPwx.png)

## Getting Started

``` 

git clone https://github.com/servrox/demo-interact-router.git

cd demo-interact-router

yarn

ng serve

```

## Built With

* [Angular CLI](https://github.com/angular/angular-cli) - version 7.3.0

* [Angular Material](https://material.angular.io/) - To pimp this app. 

## Authors

* **Marcel Mayer** - 

[servrox.solutions](http://servrox.solutions)