glutengo / angular-mgl-timeline Goto Github PK

Hi, is there anyway to disable the animations when clicking on events?

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.

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.

Please could the peerDependencies be moved to angular 7 now that v7 has been released ?

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.

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.

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.

Is there a way to disable the dot click animation? Have the dot stay in place and open the header?

This version of the timeline is not compatible with angular core version 11.0.9. Kindly upgrade the timeline packages and its dependencies.

I've just updated the library from 0.3.2 to 0.3.3

and I've got the following errors:

the project can't be compiled anymore

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.

Demo in stackblitz link give following error;

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

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).

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

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?

I would like to change styles based on the expanded status.

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

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?

How can i expand an entry from controller by its index ?

Demo in stackblitz link gives following error;

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.

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 :)

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

How can I style the timeline line ?

Hello,
it could be a good idea to bump the peerDependencies to Angular 6 now

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

There is an unnecessary log point on file 'src/timeline/timeline/timeline.component.ts' line 90 that was added on commit a3b9fa1

a3b9fa1#r33741753

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...

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

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?

Is there a way to add custom icons either within the dots or in-place of the dots?

Hello,
Can you add angular 8 in the peer dependencies ?

Thanks

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.

Hey there,

how are chances you make mgl timeline Angular 9 compatible? :)

Best

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.

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.

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.

It would be a great improvement of the readme file if you added a example on plunker or stackblitz, or even just an image.

👍

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!

Hi,

Is there any way to have all the entries expanded by default?

Best regards,

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

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?

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?

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.

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. (:

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

Got the following in my app and in the Stackblitz demo:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mobile: false'. Current value: 'mobile: true'.

I'm having an issue with the collapse animation
when I click for collapsing it freezes.
Any one had that issue ?

remove line 90 from timeline component
console.log(this.mobileWidthThreshold);