Last updated Wednesday, 31 August 2022

Deprecations

Components and other parts of the Tangram package are deprecated when they are no longer needed. This may be because a better solution is available, or because a component is no longer necessary.

Once a component or pattern becomes deprecated, it is intended to be removed from the Tangram package, and is no longer supported by Tangram. Components are deprecated and replaced in situations where making changes to the current component would cause existing instances to break.

Tangram will communicate when the decision is made to deprecate a component or pattern, and provide guidance on an alternative solution.

Deprecated components
Component		Reason for deprecation	Alternative solution
tgAspectRatio	`<tg-aspect-ratio>TgAspectRatioModule`	The aspect-ratio CSS property is preferred.	See aspect-ratio for implementation.
tgExpandingImage	`<tg-expanding-image>TgExpandingImageModule`	The same functionality is now available by using the aspect-ratio CSS property and lazy loading.	See aspect-ratio and lazy loading.
tgGrid	`<tg-col><tg-row>TgGridModule`	Native grid is now a viable option.	See grid for how to implement grid behaviour natively.

Deprecated directives
Directive		Reason for deprecation	Alternative solution
TgLoadingModule	`[tgLoading]TgLoadingModule`	Same functionality is now built into `tgButton2Component`. Improving performance by no longer needing subscriptions.	See button for implementation.

Deprecated API options
Component	API option	Reason for deprecation	Alternative solution

Deprecated helpers
Visibility helpers	Reason for deprecation
`h-hidden-${breakpoint}h-hidden-${breakpoint}-onlyh-hidden-flex-${breakpoint}h-hidden-flex-${breakpoint}-onlyh-visible-${breakpoint}h-visible-${breakpoint}-onlyh-visible-flex-${breakpoint}h-visible-flex-${breakpoint}-only`	Generated unnecessary global styles.

Deprecated breakpoint variables
Name	Size range	Alternative example
`$tg-sm-only`	0px - 767px	`@media (max-width: $tg-sm-max)`
`$tg-sd-only`	480px - 767px	`@media (min-width: $tg-sd-min) and (max-width: $tg-sm-max)`
`$tg-md-only`	768px - 1023px	`@media (min-width: $tg-md-min) and (max-width: $tg-md-max)`
`$tg-mg-only`	960px - 1023px	`@media (min-width: $tg-mg-min) and (max-width: $tg-mg-max)`
`$tg-lg-only`	1024px - 1439px	`@media (min-width: $tg-lg-min) and (max-width: $tg-lg-max)`
`$tg-ll-only`	1280px - 1439px	`@media (min-width: $tg-ll-min) and (max-width: $tg-ll-max)`
`$tg-sm-to-sd`	0px - 479px	`@media (max-width: $tg-ss-max)`
`$tg-md-to-mg`	768px - 959px	`@media (min-width: $tg-md-min) and (max-width: $tg-ms-max)`
`$tg-lg-to-ll`	1024px - 1279px	`@media (min-width: $tg-lg-min) and (max-width: $tg-lm-max)`

These breakpoint variables have been deprecated as they are not compatible with media queries

Deprecated methods
Methods	Reason for deprecation	Alternative solution
`bodyRef.addEvent`	Breaking API change.	Replace with `bodyRef.fromEvent` and use observables directly.
`delayService.delay`	Breaking API change.	`delayService.createDelay`
`eventService.addEvent`	Breaking API change.	`eventService.fromElement` or `eventService.fromWindow`

Deprecated helper Modules
Modules	Reason for deprecation	Modules included
`TgFormattersModule`	Unnecessary complexity. Import modules individually.	`TgCurrencyFormatterModuleTgDateTimeFormatterModule`
`TgHelpersModule`	Unnecessary complexity. Import modules individually.	`TgTabTrapModuleTgMediaBlockModule`
`TgHelpers2Module`	Unnecessary complexity. Import modules individually.	`TgTabTrapModuleTgMediaBlockModuleTgCircleImageModuleTgStickerModule`
`TgImagesModule`	Unnecessary complexity. Import modules individually.	`TgAspectRatioModuleTgExpandingImageModule`
`TgTypographyModule`	Unnecessary complexity. Import modules individually.	`TgBlockquoteModuleTgAddressModule`
`TgValidatorsModule`	Unnecessary complexity. Import modules individually.	`TgValidationModuleCreditCardSecurityCodeValidatorModuleCreditCardValidatorModuleEmailValidatorModuleMonthValidatorModuleNumberValidatorModuleNumberMaxValidatorModuleNumberMinValidatorModuleCurrencyValidatorModuleCurrencyMinValidatorModuleCurrencyMaxValidatorModulePostcodeValidatorModuleTelValidatorModuleYearValidatorModule`

Deleted components
Component		Reason for removal	Alternative solution
tgBox	`<tg-box>TgBoxesModule`	Breaking API change and uplifted design. It will be removed in Tangram v19.	`<tg-box2>TgBoxes2Module` See box.
tgContentSlider2Module	`<tg-content-slider2>tgContentSlider2Module`	The TgCarousel is preferred for improved performance.	`<tg-carousel>TgCarouselModule` See carousel.