glutengo / angular-mgl-timeline Goto Github PK
View Code? Open in Web Editor NEWTimeline component for Angular
License: MIT License
Timeline component for Angular
License: MIT License
I am using this lib with Angular v9 and boostrap. As my project has no material dependencies, I am not including the theme file of angular-mgl-timeline. Because of which I am not able to view content on click of header as shown in https://stackblitz.com/edit/angular-mgl-timeline. I even tried copying the same code, it does not work.
How can we use this lib with boostrap?
How can i expand an entry from controller by its index ?
I am having trouble with the alternate option.
<mgl-timeline [toggle]="toggle" [alternate]="alternate">
<div *ngFor="let year of workExData;">
<app-work-ex-year
[displayYear]=Object.keys(year)[0]>
</app-work-ex-year>
<app-work-ex-position *ngFor="let job of year[Object.keys(year)[0]].jobs" [job]=job>
</app-work-ex-position>
</div>
</mgl-timeline>
Both app-work-ex-year
and app-work-ex-position
are components that have a template for the mgl-timeline-entry
component. I have set both toggle and alternate to be true but they do not work. I also read in the documentation that the default behaviour for toggle and alternate is also true but I'm not sure why its working. Could it be related to the mgl-timeline-entry
being wrapped by a div
? Any suggestions?
This version of the timeline is not compatible with angular core version 11.0.9. Kindly upgrade the timeline packages and its dependencies.
Hey there,
how are chances you make mgl timeline Angular 9 compatible? :)
Best
I would be great to provide an entryValues attibute to fill the entries for the timeline.
Something along the line of:
interface IEntryValue {
date: Date;
header: string;
content?: string;
color?: string;
size?: number;
}
that would allow a sorting of events by date , and so on...
Right now, without this entryValues attribute, one alternative could be:
<mgl-timeline [alternate]="'false'" class="fcom-timeline">
<mgl-timeline-entry *ngFor="let entry of timelineEntries">
<!-- Header -->
<mgl-timeline-entry-header>
<strong>{{ entry.date | date:'d-MMM' }}</strong>
<div class="text-muted" [innerHTML]="entry.header | safe:'html'"></div>
</mgl-timeline-entry-header>
<!-- Content -->
<mgl-timeline-entry-content>
<div [innerHTML]="entry.content | safe:'html'"></div>
</mgl-timeline-entry-content>
<mgl-timeline-entry-dot [color]="entry.color" [size]="entry.size"></mgl-timeline-entry-dot>
<mgl-timeline-entry-side>{{ entry.date | date:'d MMMM yy' }}</mgl-timeline-entry-side>
</mgl-timeline-entry>
</mgl-timeline>
RM: safe is a custom pipe allowing parsing of string as HTML
Here an example of what I want to do https://stackblitz.com/edit/angular-mgl-timeline-gdonxn
I want to load the content of each entry as it expands, because it is very expensive.
But once the content is loaded the entry size does not adjust
<mgl-timeline >
<mgl-timeline-entry *ngFor="let event of events; let i = index;"
(expand)="onExpandEntry($event, i)">
<mgl-timeline-entry-dot></mgl-timeline-entry-dot>
<mgl-timeline-entry-header>
{{event.label}}
</mgl-timeline-entry-header>
<mgl-timeline-entry-content>
<app-my-event *ngIf="event.expanded" [eventId]="event.id"></app-my-event>
</mgl-timeline-entry-content>
</mgl-timeline-entry>
</mgl-timeline>
I'm using *ngIf="event.expanded"
to lazy load the content
Using the timeline, we experience an error in firefox when clicking on a timeline entry. The error text in the console is:
ERROR TypeError: "$event.path is undefined"
toggle Angular
View_MglTimelineEntryComponent_0 MglTimelineEntryComponent.html:3 handleEvent13Angular
The FireFox version is 65.0.1 running on Ubuntu 16.04 and 18.04
The angular-mgl-timeline version is 0.3.0.
I'm trying to override some of the styles within the library to make the collapsed version of the card appear differently but nothing I've tried seems to work and it seems to be due to how the styles are applied by the library. The generated class is far more specific than anything I could ever put in a stylesheet
[_nghost-c5] .mgl-timeline-entry-card[_ngcontent-c5]
I'm attempting to remove the background of the card and the header and display just the header content as a rounded corner div.
mgl-timeline-entry .mgl-timeline-entry-card, mgl-timeline-entry .mgl-timeline-entry-card-header {
background-color: transparent !important;
}
mgl-timeline-entry-header {
border-radius: 10px;
background-color: #EEE;
margin: 0 auto;
width: 50%;
}
Is there a way the card and header could have a distinct class that's assignable similar to how the dot has the class attribute so this can be overridden? I'm not using Material, just Bootstrap. Angular 7
It would be great to have some kind of visual clue on where is the current date on the timeline.
For instance through a showCurrent attribute, either a semi-transparent line is shown on the timeline, or a bullet is added as a timeline entry, and so on...
Okay when you click the button 'Add Entry', it adds an exact duplicate of the first entry.. im trying to create a timeline for different years whereby the headers contain the years e.g, 2018, 2019, 2020....etc and the content section will have different content for each entry. but the Add Entry function pushes (adds to the array) an exact duplicate of the first entry due to "entries" defined in the ts file as as shown below.....
(please see the attached photos)
is there a way of maybe defining different entries to hold different header and content material as opposed to the duplication. i want every object in the array "entries" to have different content.
Hi,
Is there any way to have all the entries expanded by default?
Best regards,
Hello,
I am creating a page where a timeline is necessary, the timeline was created correctly but when I open the page the timeline is generated with the mobile class, how can I change the minimum resolution to create that variable?
It would be a great improvement of the readme file if you added a example on plunker or stackblitz, or even just an image.
๐
Hello,
Can you add angular 8 in the peer dependencies ?
Thanks
i've read in the release 0.3.0 was fixed this problem, but i cannot figure it out.
im trying to access to .mgl-timeline-line { background-color: aqua;}
and set it background color but it seems to be ignored in any way possible.
any help should be appreciated.
thanks
The 'color' attribute on mgl-timeline-entry-dot is actually confusing.
One may expect to fill a rgb or a hexadecimal value whereas the content is set as a class on the element.
If it actually is a class, why not simply use existing class or ngClass instead?
Hi to all,
I see that if [alternate] is set to false, all entries are shown to the left of the timeline. The only way to show them on the right is to force the mobile width (am I right?). It will be useful - in my opinion - to add something like [symmetry] property to mgl-timeline to configure the default direction when alternate is false.
Let me know :)
When executing ng build --prod
, we're getting the following error:
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
I changed version to 0.3.2, which temporarily fixed the problem.
I would like to change styles based on the expanded status.
It is not possible to toggle an entry by clicking on the header on some mobile devices, for example iOS Chrome (version 72.0.3626.101), iOS Safari (iOS 12.1.4).
The idea is to keep the dot unmovable while still allowing the expanding feature. Couldn't find a way to override the animation or stop the event propagation so I had to modify the lib.
Awesome timeline btw!
The lib does not work with new Angular versions due to critical changes:
core: The deprecated type Renderer has been removed. Use Renderer2 instead.
https://github.com/angular/angular/blob/master/CHANGELOG.md#code-refactoring
Any way to update?
Thanks.
i have issue when the page first time load the timeline is forced to mobile so the alternate effect won't appear
but when i open the inspector it's suddenly change back to desktop make the alternate effect appear
can you help me ?
sorry for bad english
Hi there,
I am getting this error when trying to apply the material theme with @include mgl.timeline-theme($your-theme)
:
SassError: isn't a valid CSS value.
In commit dce728f line 12 in src/timeline/timeline.theme.scss, was changed to
mat.font-family((font-family: $typographyConfig));
However it works if I change it locally to the following
mat.font-family($typographyConfig);
Version: 1.0.0 - Angular 14
Hi,
Weird one here, the .mobile class is present below 670px screen width and between 767px and 863px.
However, it is missing between 670px and 767px. How can I get around this?
Thanks,
Alan.
I'm having an issue with the collapse animation
when I click for collapsing it freezes.
Any one had that issue ?
The stackblitz demo fails to load with the error:
Error in /~/src/app/app.module.ts (9:22)
Cannot use import statement outside a module
On your NPM page there is an install command in the Getting Started
section:
https://www.npmjs.com/package/angular-mgl-timeline
Actual result:
Getting started
run npm install --save mgl-angular-timeline
Expected result:
Getting started
run npm install --save angular-mgl-timeline
Pretty sure this is just an old readme and should be replaced with the one on GitHub.
Is there a way to disable the dot click animation? Have the dot stay in place and open the header?
Hello, i moved my app from single module with app.module to multiple modules to can use lazy loading, but i dont know id i was importing wrong the references, perhaps if you hava an example with lazy loading, because the app don't throws errors, but the timeline is not working.
this is app.module
`
...
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MglTimelineModule } from "angular-mgl-timeline";
...
@NgModule({
declarations: [
...
],
imports: [
...
MglTimelineModule ,
...
],
exports: [
...
MglTimelineModule ,
...
],
})
`
and in the child module i import the MglTimelineModule normal and set it in the declarations array.
please if you could provide to me an example with lazy loading i'll be very thankful.
ERROR in node_modules/angular-mgl-timeline/src/timeline/timeline-entry-content/timeline-entry-content.component.d.ts(12,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-mgl-timeline/src/timeline/timeline-entry-content/timeline-entry-content.component.d.ts(13,9): error TS1086: An accessor cannot be declared in an ambient context.
showing above-mentioned issues while compile
Hi, is there anyway to disable the animations when clicking on events?
Is there a way to add custom icons either within the dots or in-place of the dots?
There is an unnecessary log point on file 'src/timeline/timeline/timeline.component.ts' line 90 that was added on commit a3b9fa1
Please could the peerDependencies
be moved to angular 7 now that v7 has been released ?
Hi there, I have been using this repo since Angular 6 (thank you so much, btw!) and I am noticing that since Angular 8, it's fallen behind on updates. I would be happy to help maintain the repo to keep it updated to the latest version of Angular if you would like some help.
In a design prospective, I think the side property would be helpful.
I am trying to set style depending on the side where the box is.
Issue
When adding the dot to the timeline it simply does not appear on to the timeline
Expected Behavior
The dot appearing to the timeline as seen in the docs
Dependencies
"@angular/animations": "^8.1.2",
"@angular/cdk": "^8.1.1",
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/material": "^8.1.1",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"angular-mgl-timeline": "^0.3.2",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
Code
<mgl-timeline>
<mgl-timeline-entry>
<mgl-timeline-entry-header>Header</mgl-timeline-entry-header>
<mgl-timeline-entry-content>Content</mgl-timeline-entry-content>
<mgl-timeline-entry-dot></mgl-timeline-entry-dot>
</mgl-timeline-entry>
</mgl-timeline>
That is the exact code I have implemented. The dot does not appear on the UI. Here is an image of what is being displayed.
It seems that importing BrowserAnimationsModule is not optional. (tried removing it in the Stackblitz demo)
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
Thanks for your confirmation.
Hi !
I need this package to be Angular 15 compatible to update a project to Angular 15.
I made a pull request for this purpose #95
Thanks for having a look and taking care of this. (:
When I copy the side data code from the demo, i don't see any data on the side. Is there a way to fix this?
How can I style the timeline line ?
remove line 90 from timeline component
console.log(this.mobileWidthThreshold);
Hello,
it could be a good idea to bump the peerDependencies
to Angular 6
now
Hi,
my issue is more of an enhancement than real issue: could it be possible for you to add an option to easily size the side?
Actually, the sides are showing a date but it feels weird to have half a screen showing only a date.
I know I could play with the module code to add that (or worse, hard code my wanted size) but that would be quite dirty. A component option to play with side size would be great. Being no expert @angular, I would not know how to do it a clean way. If anyone have a way that does not involve modifying the module, that might also be good to add the steps in the readme.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.